我正在寻找一种使用redux-actions进行减速器合成的优雅而简单的方法
在我的项目中,我需要同时运行多个Control。因此,与其创建一个单独的大型ControlsReducer来管理所有事情,我不希望将Controls和Control逻辑拆分为自己拥有自己的reducer。
以下代码有效,但是我必须在我的controlReducer中定义他必须转发给ControlReducers的每个controlAction。有没有更好/更简单的方法可以做到这一点?
// --------------- ControlsActions.js
import { createActions } from 'redux-actions';
export const controlsActions = createActions({
CONTROLS: {
ADD_CONTROL: x => x,
}
})
// --------------- ControlActions.js
import { createActions } from 'redux-actions';
export const controlActions = createActions({
CONTROL: {
UUID_RECEIVED: x => x,
}
})
// --------------- ControlsReducer.js
import { handleActions, combineActions } from 'redux-actions';
import { INITIAL_STATE as CONTROL_INITIAL_STATE, controlReducer } from './controlReducer'
import { controlsActions as actions } from './controlsActions';
import { controlActions } from './controlActions';
const actionsToCombine = [
controlActions.control.uuidReceived
]
const INITIAL_STATE = {
controls: []
};
export const controlsReducer = handleActions(
{
[combineActions(...actionsToCombine)]: controlAction,
[actions.controls.addControl]: addControl,
},
INITIAL_STATE
);
function controlAction(state, action) {
let copy = state.controls.slice()
copy[action.payload.index] = controlReducer(state.controls[action.payload.index], action);
return {
...state,
controls: copy
}
}
function addControl(state) {
const updatedControls = state.controls.concat([CONTROL_INITIAL_STATE])
return {
...state,
controls: updatedControls
};
}
// --------------- ControlReducer.js
import { handleActions } from 'redux-actions';
import { controlActions as actions } from './controlActions';
export const INITIAL_STATE = {
id: null,
uuid: null,
};
export const controlReducer = handleActions(
{
[actions.control.uuidReceived]: uuidReceived,
},
INITIAL_STATE
);
function uuidReceived(state, action) {
return {
...state,
uuid: action.payload.uuid
};
}