Comment organiser un réducteur Redux imbriqué?

Question

Mon réducteur pour une partie de ma demande va être profondément imbriquées

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

et j'ai beaucoup d'entre eux d'ajouter, comment puis-je abstraite l'imbrication de l'objet d'une meilleure façon

I pensait quelque chose comme return newState type de chose. Je ne comprends pas vraiment si le réducteur est pour ce genre de choses. La documentation redux est difficile à comprendre pour moi, donc j'ai besoin d'un meilleur exemple de la façon d'organiser le réducteur .. merci

Answer 1

combineReducers est certainement le chemin à parcourir. Vous pouvez également avoir du succès en normalisant et en aplatissant votre état pour qu'il soit plus facile de travailler avec.

Vous pouvez faire

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

Ensuite, vos composants peuvent saisir les bits individuels qu'ils veulent dans mapStateToProps, plutôt que d'obtenir un grand grand grand objet:

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