Javascript 如何在reactjs中从相同的redux状态执行两种类型的过滤

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

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

我不确定这样做是否正确

reducers.js

这就是我的UI的样子 它在顶部有下拉菜单，可以选择过滤

订单消息

和

产品消息

---

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

---

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

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

---

我的解决方案是在存储中创建另一个变量，例如filteredList，每次分派操作筛选器时，filteredList都会更改并在UI上显示结果。

您正在修改消息列表。相反，在存储中为过滤的消息设置单独的状态。在组件中，确保基于filteredMessageList进行渲染

代码示例

const initialState={
加载：false，
加载：false，
消息列表：[]，
filteredMessageList:[]，/{//
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
            };
    }
}

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
    })

}