javascript - 首次使用后过滤数据功能不起作用

Question

我正在使用 React 和 redux 构建一个应用程序。下面的目的是充当main的reducer(附有组合Reducer)。我正在导入一个 filterData 函数，该函数在您第一次选择任何操作类型时起作用。遗憾的是，filterData 函数不会在第一个操作之后执行。我认为这与以下事实有关:我的第一个操作过滤了所有其他数据……并且没有任何可处理的内容。我需要过滤数据功能在用户选择任何操作后继续工作，并继续传递 action.payload

import {
    FETCH_USERS_REQUEST,
    FETCH_USERS_SUCCESS,
    FETCH_USERS_FAILURE,
    STATUS_5500_SUBMITTED_ActionType,
    STATUS_5500_Success_ActionType,
    STATUS_5500_Ready_To_File_ActionType,
    STATUS_5500_Error_ActionType,
    SortingAllPlansAlphabetically
} from "./FakeStuff/userTypes";


import { filterData } from "../../States/AllStates/FakeStuff/userActions";

const initialState = {
    loading: true,
    data: [],
    error: ""
};


const FakeReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_USERS_REQUEST:
            return {
                ...state,
                loading: true
            };
        case FETCH_USERS_SUCCESS:
            return {
                loading: false,
                //data: action.payload,
                data: filterData(action.payload),
                error: ""
            };
        case FETCH_USERS_FAILURE:
            return {
                loading: false,
                data: [],
                error: action.payload
            };


        case STATUS_5500_SUBMITTED_ActionType:
            return {
                data: filterData(state.data, "Submitted"),
            };

        case STATUS_5500_Success_ActionType:
            return {
                data: filterData(state.data, "Success")
            };


        case STATUS_5500_Ready_To_File_ActionType:
            return {
                data: filterData(state.data, "Ready To File")

            };
        case STATUS_5500_Error_ActionType:
            return {
                data: filterData(state.data, "Error")

            };

        case SortingAllPlansAlphabetically:
            return {
                loading: state.loading,
                error: state.error,
                data: console.log("yolo")
            };



        default:
            return state;
    }
};

export default FakeReducer;

来自另一个文件的我的函数

export const filterData = (Data, searchText) => {
    console.log("filterData's searchText value is : " + searchText)
    return Data.filter(xyz => {

        if (xyz.Status55.includes(searchText)) {
            return true;

        }
        if (xyz.planType.includes(searchText)) {
            return true;
        }

        if (searchText === undefined) {
            return true;
        }

        if (searchText !== undefined) {
            return false;
        }

    })

}

我还有以下方法来加载初始数据，并在 Axios 成功加载内容后调度操作

export const fetchUsers = () => {
    return (dispatch) => {
        dispatch(fetchUsersRequest)
        //axios.get("https://jsonplaceholder.typicode.com/users")
        axios.get("./PublicData/BookOfBusiness.json")
            .then(response => {
                const users = response.data
                dispatch(fetchUsersSuccess(users))

            })
            .catch(error => {
                const ErrorMsg = error.message
                dispatch(fetchUsersFailure(ErrorMsg))
            })
    }
}

感谢您的帮助。

Answer 1

您应该考虑使用selectors在渲染之前过滤数据。这样您就可以保持源数据完整，并且只需切换过滤器状态。

Reducers 现在仅设置 filter 状态:

...

case STATUS_5500_SUBMITTED_ActionType:
  return {
    ...state,
    filter: "Submitted"
  };

case STATUS_5500_Success_ActionType:
  return {
    ...state,
    filter: "Success"
  };

...

您可以使用选择器将状态映射到 connect 帮助器中的 props:

const filterData = ({ data, filter }) => {
  ...filter code goes here - it must return the filtered data
}

const mapStateToProps = state => ({
  data: filterData(state)
})

const ConnectedComponent = connect(mapStateToProps)(MyComponent)

您可以使用 https://github.com/reduxjs/reselect 中的 createSelector 帮助程序来优化选择器因此，仅当参数发生变化(内存/缓存)时才会计算它们。