CODEWITHSUNDEEP
reactjsreduxreact-redux
EmCaye
EmCaye

Reputation: 64

Redux hierarchical reducers

I am wondering if I can nest reducers this way. 

var combinedReducers  = {
        Tasks: TaskDuck.reducer,
        Approval:  {
                ApprovalDetail: ApprovalDuck.reducer ,
                ApprovalDecisions: DecisionsTasksDuck.reducer 
            } 
    };

    export const rootReducer = Redux.combineReducers<AppState>(combinedReducers);

Upvotes: 1

Views: 486

Answers (2)

markerikson
markerikson

Reputation: 67459

You're close. You can call combineReducers() multiple times. For your example, you'd want: 

const rootReducer = combineReducers({
    Tasks : TaskDuck.reducer,
    Approval : combineReducers({
        ApprovalDetail : ApprovalDuck.reducer,
        ApprovalDecisison : DecisionsTaskDuck.reducer
    })
});

Upvotes: 1

EmCaye
EmCaye

Reputation: 64

combineReducers properties should be mapped to functions, not to objects. And as you can see here I added a function that returns the intended object and it worked.

var combinedReducers  = {
            Tasks: TaskDuck.reducer,
             Approval:()=> ({
                ApprovalDetail: ApprovalDuck.reducer,
                Decisions: DecisionsTasksDuck.reducer
            })
        };

        export const rootReducer = Redux.combineReducers<AppState>(combinedReducers);

Upvotes: 0

Related Questions