如何在 reactjs 中从同一 redux state 进行两种过滤

Question

我有一个反应 js 应用程序，它使用 redux 进行 state 管理。 它有显示在屏幕上的消息列表。 还有两个根据产品信息和订单信息过滤列表的下拉菜单。 整个消息列表来自 redux state。

我尝试这样做，但我遇到了问题，一旦我过滤列表，下次它尝试从过滤列表运行过滤器，结果是我没有收到任何消息。

我不确定这是否是正确的方法。

减速器.js

const initialState = {
    loading: false,
    loaded: false,
    messageList: [],     <---- I am displaying this messageList in my component.
    fetchError: null,
}

export default (state=initialState, action) => {
    switch (action.type) {
        case GET_MESSAGE_LIST_LOAD:
            return {
                ...state,
                loading: true
            };
        case GET_MESSAGE_LIST_SUCCESS:
            return {
                ...state,
                loading: false,
                loaded: true,
                messageList: action.payload,
            };

        case FILTER_MESSAGE_BY_ORDER:
            return {
                ...state,
                filterState: action.payload,
                messageList: state.messageList.filter((item)=> {
                    return  item.productId === null;
                })
            };
        case FILTER_MESSAGE_BY_PRODUCT:
            return {
                ...state,
                filterState: action.payload,
                messageList: state.messageList.filter((item) => {
                    return item.orderNumber === null;
                })
            };
        case GET_MESSAGE_LIST_ERROR:
            return {
                ...state,
                loaded: false,
                fetchError: action.error,
            };
        default:
            return {
                ...state
            };
    }
}

动作.js

export const getMessageList = () => dispatch => {
    dispatch({
        type: GET_MESSAGE_LIST_LOAD
    });
    new _rest().get('message/list')
        .then(res => {
            // console.log('messageList',res)
            dispatch({
                type: GET_MESSAGE_LIST_SUCCESS,
                payload: res.data._embedded.messageListResourceList
            })

        }).catch(err => {
            dispatch({
                type: GET_MESSAGE_LIST_ERROR,
                error: err
            })
    })
}

export const filterOrderMessage = () => dispatch => {

    dispatch({
        type: FILTER_MESSAGE_BY_ORDER
    })

}

export const filterProductMessage = () => dispatch => {

    dispatch({
        type: FILTER_MESSAGE_BY_PRODUCT
    })

}

这就是我的 UI 的样子 它在顶部有下拉列表，其中必须选择过滤ORDER MESSAGE和PRODUCT MESSAGE 。

Answer 1

您正在改变消息列表。 取而代之的是，为存储中的过滤消息使用单独的 state。 在您的组件中，确保基于过滤的消息列表进行渲染。

代码示例

const initialState = {
    loading: false,
    loaded: false,
    messageList: [],
    filteredMessageList: [], // <----- create a new state
    fetchError: null,
}
...
case FILTER_MESSAGE_BY_ORDER:
            return {
                ...state,
                filterState: action.payload,
                filteredMessageList: state.messageList.filter((item)=> { // <----update filteredMessageList (not messageList)
                    return  item.productId === null;
                })
            };

Answer 2

创建一个名为 lists 的变量，其中包含完整列表和另一个包含过滤结果的变量。

过滤时，您将从完整列表中启动过滤器，该列表将保持不变。

Answer 3

在您的代码中，每次发送操作时，都会更改 messageList，这意味着下次过滤时，它会过滤“更改的 messageList”-> 错误结果

我的解决方案是在商店中创建另一个变量，例如，filteredList，每次调度操作过滤器时，filteredList 都会改变并在 UI 上显示结果。