如何通过Redux动作处理Redux Reducer组成

时间:2018-08-11 09:19:02

标签: reactjs redux redux-actions

我正在寻找一种使用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
    };
  }

0 个答案:

没有答案