Question

在react-redux中，我试图创建一个通用的reducer，意思是一个具有通用逻辑的reducer，每次都会将（使用该逻辑）写入商店的不同部分。

我一遍又一遍地阅读Reusing Reducer Logic，我无法绕过它。让我们说我有这种状态：

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

a和d是两个缩减器与combineReducers()组合以创建商店。我希望使用通用逻辑来管理部分c。我为c编写了reducer逻辑，我将其包装起来创建一个带有名称的高阶减速器。

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

我当然希望有人了解我，我是新人，并且会做出反应。

Answer 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}
];

减速器的初始状态

const initialState = {
    data: []
}

actionGenerators使用Symbol创建一个唯一的ID，并将该ID分配给action和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

redux - 如何创建通用的reducer？

1 个答案: