Как сделать редукторы многоразовыми?

Question

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

app1:

export default (state: App1State = initialState, action: ReducerAction) => {
    switch (action.type) {
        case APP_1.ACTION:
            return {
                ...state,
                id: 123,
                app1SpecificState: 'app1'
            }

        default:
            return state
    }
}

app2:

export default (state: App2State = initialState, action: ReducerAction) => {
    switch (action.type) {
        case APP_2.ACTION:
            return {
                ...state,
                id: 123,
                app2SpecificState: 'app1'
            }

        default:
            return state
    }
}

поэтому, чтобы объединить их, я думаю сделать что-то вроде этого:

export default (state: App1State = initialState, action: ReducerAction) => {
if (process.env.APP_NAME === 'app2') {
    (state as App2State) = App2State
}
    switch (action.type) {
        case APP_1.ACTION:
            return {
                ...state,
                id: 123,
                app1SpecificState: 'app1'
         }
        case APP_2.ACTION:
            return {
                ...state,
                id: 123,
                app2SpecificState: 'app2'
            }

        default:
            return state
    }
}

Мне интересно, а) имеет ли это смысл б) это хорошая идея в)есть лучший способ добиться этого?

Я также не хочу повторять оператор if для всех моих «общих» редукторов, поэтому было бы неплохо абстрагировать это, если это возможно. вероятно HOC, если это вообще возможно здесь?

Answer 1

Для динамического обновления вашего магазина вы должны отправить данные с именем его свойства следующим образом:

dispatch({
    type: APP.ACTION,
    payload: "app1",
    specificState: "app1SpecificState"
})
dispatch({
    type: APP.ACTION,
    payload: "app2",
    specificState: "app2SpecificState"
})

, а затем в вашем редукторе вы можете использовать так:

case APP.ACTION:
        return {
            ...state,
            id: 123,
            [action.specificState]: action.payload
     }

Это тот же принцип, что и динамическое обновление состояния.

Answer 2

В документации к Redux есть рецепты для этого, посмотрите:

Повторное использование логики редуктора

Если вам нужно динамически создавать новые части хранилища Redux, вы можетепозже добавьте еще редукторы:

Динамически добавьте редуктор