Fusion réducteur comme une clé dans un autre réducteur

Question

J'ai un réducteur reducerA qui ressemble à ceci

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

J'ai un autre réducteur reducerB qui ressemble à ceci

reducerB = { 
    E: {}, 
} 

Ce que je voudrais faire est fusionner reducerB en reducerA et obtenir quelque chose qui ressemblerait à quelque chose comme ceci

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

Lorsque les modifications apportées aux variables d'état A, B, C et D sont déclenchées dans la fonction reducerA et que les modifications dans la variable d'état E sont toujours déclenchées dans la fonction reducerB.

J'ai déjà essayé d'utiliser combineReducers. Mais apparemment, il combine reducerA et reducerB en tant qu'enfants d'un réducteur externe. Et cela me besoin d'accéder à la variable d'état à l'intérieur reducerA comme reducerA.reducerA.A

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

Je voudrais savoir s'il y a une solution plutôt clinique au problème. J'ai trouvé pas mal de bibliothèques qui résolvent le problème. Mais je suis toujours réticent à leur sujet et je voudrais résoudre cela sans eux si 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) 
    } 
} 

Cela devrait Résolvez votre problème. D

Answer 2

Je pense que ce que vous demandez est contre le concept redux réducteur et rompt l'encapsulation. Si vous voulez créer un réducteur qui se relaie sur l'état de reducerA et réducteurB, vous devez probablement envoyer les actions qui sont expédiées respectivement reducerA et reducerB et ne pas compter sur d'autres réducteurs.

Quoi qu'il en soit, lorsque vous utilisez réagir-Redux, je vous recommande d'employer mapDispatchToProps où vous pouvez créer un mappage de l'état global pour vos accessoires composants, par exemple:

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

connect(mapStateToProps)(YourComponent)