Редуктор A получает действия, которые соответствуют редуктору B

Question

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

UserReducer:

export const userReducer: Reducer<IUserState, UserActions> = (
    state = initialUserState,
    action
) => {
    switch(action.type) {
        case UserActionTypes.GET_CURRENT_USER: {
            return {
                ...state,
                currentUser: action.currentUser
            }
        }
        case UserActionTypes.SIGN_IN_USER: {
            return {
                ...state,
                currentUser: action.currentUser
            }
        }
        default:
            return initialUserState
    }
}

ListReducer:

export const listReducer: Reducer<IListState, ListActions> = (
    state = initialListState,
    action
) => {
    switch(action.type) {
        case ListActionTypes.GET_ALL: {
            return {
                ...state,
                items: actions.items
            }
        }
        case ListActionTypes.FILTER_LIST: {
            return {
                ...state,
                items: action.items
            }
        }
        default:
            return initialListState
    }
}

комбинированный редуктор

const rootReducer = combineReducers<IAppState>({
    listState: listReducer,
    userState: userReducer
})

Проблема, с которой я столкнулся, заключается в том, что при отправке действия со списком действие будет выполнено правильно в редукторе списка, но это действие также отправляется редуктору пользователя. Поскольку пользовательский редуктор не учитывает действие списка, возвращается начальное состояние. Если я вызываю только действие GET_CURRENT_USER, я получаю информацию о пользователе, но как только я вызываю действие GET_ALL, информация о пользователе сбрасывается в ноль.

Answer 1

Вы возвращаете исходное состояние в операторе default:. Попробуйте это:

export const userReducer: Reducer<IUserState, UserActions> = (
    state = initialUserState,
    action
) => {
    switch(action.type) {
        case UserActionTypes.GET_CURRENT_USER: {
            return {
                ...state,
                currentUser: action.currentUser
            }
        }
        case UserActionTypes.SIGN_IN_USER: {
            return {
                ...state,
                currentUser: action.currentUser
            }
        }
        default:
            return {...state}; // <= instead of initialUserState
    }
}

Сделайте то же самое с другим редуктором.

В качестве совета попробуйте использовать immerjs, чтобы избежать мутации ваших объектов. Когда у вас есть вложенные объекты, использование оператора распространения в глубине объекта становится довольно трудным для чтения и подвержено ошибкам (легко непреднамеренно изменить ваш объект).

Используя immerjs Ваш код становится:

import produce from "immer";

...

export const userReducer: Reducer<IUserState, UserActions> = (
    state = initialUserState,
    action
) => {
    switch(action.type) {
        case UserActionTypes.SIGN_IN_USER:
        case UserActionTypes.GET_CURRENT_USER: {
            return produce(state, draftState => {
                       draftState.currentUser: action.currentUser
                   });
        }
        default:
            return produce(state, draftState => {});
    }
}