React Redux Combine Reducers

Question

In Redux, if I am using say a data structure as follows:

{ 
    products: [ 
                {id:1, name:'tv', description:'A color Sony TV', cost:1000}, 
                {id:2, name:'remote control', description:'A black compact Remote Control', cost: 999}
    ],
    shoppingCart: [],
    checkoutCart: []
}

And I use the Redux combineReducers

combineReducers({products, shoppingCart, checkoutCart})

If I wanted to copy the shopping Cart data into the checkoutCart say on a click event, where would I do so / or should I do so ?

score 0 · Answer 1 · answered Dec 19 '16 at 15:29

0

When you use combineReducers you're assuming the reducers are indepedent and they cannot see each other's state. Each reducer will only receive a "slice" of the state.

In order to achieve what you want, I would consider joining the shoppingCart and checkoutCart reducers / state into a single one and using switch (action.type) to know what to do.

Now you can simply create an action on your new reducer that returns something like

{ checkoutCart: clone(state.shoppingCart) }

answered Dec 19 '16 at 15:29

Andre Pena

56,650
48
196
243

so I would have to move the `shoppingCart` and `checkoutCart` down a level (in the state data) so that that slice could be accessed by the appropriate reducer. – avrono Dec 19 '16 at 16:25
@avrono. That's a possibility. As others have said, you also have the option to pass `shoppingCart` as the payload of an action. – Andre Pena Dec 19 '16 at 16:26
@avrono I think it's a matter of what you think suits best – Andre Pena Dec 19 '16 at 16:27
I am using `containers` with `connect` - but struggling to pass the `shoppingCart` to the click handler in the container ... do you have an example ? – avrono Dec 19 '16 at 16:31
@avrono If you want to pass the shoppingCart as a payload, you have to do that in the component. Get the data in the component and pass it to the action. – Andre Pena Dec 19 '16 at 16:33

score 0 · Answer 2 · answered Dec 19 '16 at 15:51

0

If you want to clone your shoppingCart to the checkoutCart. You could in your onClick function pass this.props.shoppingCart as a parameter to your action call.

onClick(e) {
    this.props.checkOutActions.checkOut(this.props.shoppingCart);
}

answered Dec 19 '16 at 15:51

Knut Erik Lødding

111
8

React Redux Combine Reducers

2 Answers2