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

Question

我正在使用 React 和 redux 构建应用程序。下面的目的是作为一个reducer（附加一个组合Reducer）到main。我正在导入一个 filterData 函数，它在您第一次选择任何 Action 类型时起作用。可悲的是，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 过滤数据。这样您就可以保持源数据完好无损，只需切换filter 状态即可。

Reducers 现在只设置filter 状态：

...

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

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

...

您可以使用选择器将状态映射到 connect 助手中的道具：

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 帮助器优化选择器，以便仅在其参数发生变化时计算它们（记忆/缓存）。