Question

我的CRA中有2个应用程序，它们使用相同的UI，但功能却略有不同。目前，我在2个应用程序中使用了许多类似的reducer，并且想知道使它们可重用并且不重复代码的最佳方法吗？

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

我想知道a）是否合理b）这是一个好主意c）还有更好的方法可以实现这一目标？

我也不想在所有“共享的” reducer上重复if语句，因此，如果可能的话，最好抽象一下。可能是一个HOC，如果在这里甚至可以的话？

Answer 1

redux文档包含用于此的食谱，请查看以下内容：

Reusing reducer logic

如果需要动态创建redux存储的新部分，则以后也可以添加更多的reducer：

Add reducer dynamically

Answer 2

为了动态更新商店，您应该使用属性名称来分派数据，如下所示：

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
     }

这与动态更新状态的原理相同。

如何使减速器可重复使用？

2 个答案: