如何组织嵌套的Redux减速器？

Question

My reducer for a section of my application is going to be deeply nested

 export const MainReducers = function(state = mapDataToInitialState(), 
 action = {}) {
   switch (action.type) {
               case Constants.SET_FOO:
        return update(state, {

          sheet: {
            stream: {
              appeal_0: {
                issues: {
                  problem1: {
                    foo: {
                      $set: action.payload.foo
                    }
                  }
                }
              }
            }
          }
        });

        case Constants.SET_BAR:
        return update(state, {
          // TODO make reusable for all issues fields
         sheet: {
            stream: {
              person: {
                issues: {
                  problem1: {
                    bar: {
                      $set: action.payload.bar
                    }
                  }
                }
              }
            }
          }
        });
   default: return state;
  }
 };

And I have many of these to add, How can i abstract the nesting of the object in a better way

I was thinking something like return newState type of thing. I don't really understand if combine reducer is for this type of thing. The redux documentation is hard for me to understand thus i need a better example of how to organize the reducer.. thanks

Answer 1

combineReducers is definitely the way to go. You may also have some success normalising and flattening your state so that it's easier to work with.

So you might want to do

const appReducer = combineReducers({
    streams: streamReducer,
    people: peopleReducer,
    issues: issueReducer
});

Then your components can grab the individual bits they want in mapStateToProps, rather than getting a huge great big object:

function mapStateToProps( state, ownProps ) {
    return {
        person: state.people[ ownProps.personId ]
        issues: state.issues[ ownProps.personId ]
    };
}