将减速器合并为另一个减速器的关键

Question

I have a reducer reducerA that looks like this

reducerA = {
  A: [],
  B: {},
  C: {},
  D: [],
};

I have another reducer reducerB that looks like this

reducerB = {
  E: {},
}

What I would like to do is merge reducerB into reducerA and obtain something that would look something like this

reducerA = {
  A: [],
  B: {},
  C: {},
  D: [],
  reducerB: {
    E: {}
  },
};

Where changes to state variables A,B,C and D are triggered in reducerA function and changes in state variable E is still triggered in reducerB function.

I have already tried using combineReducers . But apparently, it combines reducerA and reducerB as children of a outer reducer. And that would require me to access the state variable inside reducerA as reducerA.reducerA.A

export default {
  reducerA: combinedReducers({reducerA, reducerB})
}

I would like to know if there is a rather clinical solution to the problem. I found quite a few libraries that do solve the problem. But I am still reluctant about them and would like to solve this without them if possible.

Answer 1

const reducerA = (state, action) => {
  const newState = {}
  switch (action.type) {
    case someaction:
      newState = {
        A: [],
        B: {},
        C: {},
        D: [],
      }
    default:
      newState = {
        ...state
      }
  }
  return {
    ...newState,
    reducerB: reducerB(state, action)
  }
}

This should solve your problem. ;D

Answer 2

I think what you ask for is against the redux reducer concept and breaks encapsulation. If you want to create a reducer which relays on state of reducerA and reducerB, you should probably dispatch the actions which are dispatched be reducerA and reducerB respectively and don't rely on other reducers.

Anyhow, when you are using react-redux, I'd recommend to employ mapDispatchToProps where you can create a mapping of the global state for your component props, eg:

const mapStateToProps = state => {
  return state.reducerA.foo + state.reducerB.bar
}

connect(mapStateToProps)(YourComponent)