redux - 如何创建通用减速器？答案

【问题标题】：redux - how to create a generic reducer?redux - 如何创建通用减速器？
【发布时间】：2018-09-19 04:51:36
【问题描述】：

在 react-redux 中，我正在尝试创建一个通用化简器，这意味着一个具有通用逻辑的化简器，每次都写入（使用该逻辑）到商店中的不同部分。

我一遍又一遍地阅读Reusing Reducer Logic，我就是无法理解它。假设我有这种状态：

{ a: { b: { c: {...} } } }, d: { c: {...} } }

a 和d 是两个reducer 结合combineReducers() 创建存储。我希望c 部分使用通用逻辑进行管理。我为c 编写了reducer 逻辑，我包装它以创建一个带有名称的高阶reducer。

我如何使用 c 减速器创建 a 减速器并参考其位置（以及相应的 d）？也许换句话说，我如何创建一个带有“存储地址”的reducer，管理他的状态片段，不知道它在哪里？

我当然希望有人理解我，我是 redux 和 react 的新手。

【问题讨论】：

等待.. 所以你有状态a.b.c 和d.c。逻辑相同但实际状态不同？
我认为这里的复杂性是由嵌套状态创建的，然后进一步由嵌套和类似状态创建。传统智慧是尽可能平坦地存储状态，然后在需要时将状态“组合”在一起
Redux 相当繁重。正如@azium 指出的那样，该州应该是相对平坦的。也许您所在州的嵌套要求您编写太多您认为应该重用的重复代码？如果您描述c reducer 中常见的逻辑，我们可以给出实际答案。也许有比使用“继承”或您可能想到的任何模式来淡化减速器的简单性更好的方法:)
@timotgl redux is only boilerplate heavy if you set it up that way。如果需要，您可以使用
当然，但是当有多个 reducer（正确地）处理 ajax 请求和类似的事情时，你就会开始重复自己。在不破坏简单性的情况下，在 Redux 上保持非常干燥通常很困难。

标签： redux react-redux reducers

【解决方案1】：

Reducer 现在是简单的功能，可以在其他地方重复使用

const getData = (state, action) => {
    return {...state, data: state.data.concat(action.payload)};
};

const removeLast = (state) => {
    return {...state, data: state.data.filter(x=>x !== state.data[state.data.length-1])};
}

动作类型和reducer函数现在被声明在一个数组中

const actions = [
    {type: 'GET_DATA', reducer: getData},
    {type: 'REMOVE_LAST', reducer: removeLast}
];

reducer 的初始状态

const initialState = {
    data: []
}

actionGenerators 使用 Symbol 创建一个唯一的 Id，并将该 Id 分配给操作和 reducer 函数。

const actionGenerators = (actions) => {
    return actions.reduce((a,c)=>{
        const id = Symbol(c.type);   
        a.actions = {...a.actions, [c.type]: id};
        a.reducer = a.reducer ? a.reducer.concat({id, reducer: c.reducer}) : [{id, reducer: c.reducer}];
        return a;
    },{});
}

reducerGenerators 是一个通用的 reducer 创建器。

const reducerGenerators = (initialState, reducer) => {
    return (state = initialState, action) => {
        const found = reducer.find(x=>x.id === action.type);
        return found ? found.reducer(state, action) : state;
    }
}

用法

const actionsReducerCreator = actionGenerators(actions);
const store = createStore(reducerGenerators(initialState, actionsReducerCreator.reducer));
const {GET_DATA} = actionsReducerCreator.actions;
store.dispatch({type: GET_DATA});

查看我的 github 项目，我有一个使用此实现的待办事项应用程序。

Redux-Reducer-Generator

【讨论】：