Как сделать два типа фильтрации из одного и того же редукционного состояния в reactjs

Question

У меня есть приложение реагирования js, которое использует приращение для управления состоянием У него есть список сообщений, которые отображаются на экране. И два выпадающих списка, которые фильтруют список по сообщению товара и сообщению заказа. Весь список сообщений исходит из избыточного состояния.

Я попытался сделать это, но столкнулся с проблемой, что, когда я в следующий раз фильтрую список, он пытается запустить фильтр из отфильтрованного списка, и в результате я не получаю там сообщения.

Я не уверен если это правильный способ сделать это.

редукторы. 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
    })

}

Вот так выглядит мой пользовательский интерфейс. В верхней части есть раскрывающийся список с параметрами фильтрации ORDER MESSAGE и PRODUCT MESSAGE.

Answer 1

Вы поменяете список сообщений. Вместо этого, есть отдельное состояние для отфильтрованных сообщений в хранилище. В вашем компоненте убедитесь, что рендеринг основан на FilterMessageList.

Пример кода

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

В вашем коде каждый раз, когда вы отправляете действие, вы меняете messageList, что означает, что при следующей фильтрации он фильтрует «измененный messageList» -> неверный результат

Мое решение - создать другую переменную в хранилище, например FilterList, каждый раз, когда вы отправляете фильтр действий, FilterList будет меняться и показывать результат в пользовательском интерфейсе.

Answer 3

Создайте переменную под названием списки с полным списком и другую с отфильтрованным результатом.

При фильтрации вы запустите фильтр из полного списка, который останется без изменений.