Redux Toolkit Tutorial - 12 - Combine Reducers

📱 Follow Codevolution

Combine Reducers in Redux

[kevinkiumbe]

HOW IS THIS KNOWLEDGE FREE? NOBODY NEEDS TO PAY FOR A CLASS WHEN THIS GUYS IS SHARING PREMIUM CONTENT FOR YOU ARE GOD'S SPENT 2 WEEKS STUDYING, THIS GUYS MADE IT MAKE SENSE IN AN HOUR!!!!

[akalrove]

Excellent series so far. The way you go to the details of redux is truly awesome. I've used redux for a few years and still did not understand these details. Keep it up!

[IamPetrus]

Yes Sr!
Just going through each video and getting organised the mess I was in. Thank you!!

[_Rohit_Kumaar]

For every playlist, you created a master piece

[legdayenjoyer]

Understood so many concepts in such short time!!!

[rajnandanibhawsar]

I just wanna be like you. You are my iconic teacher.

[Rikimkigsck]

This is how you teach a subject before started watching your playlist I came across 4-5 different redux videos from big channels all of them were garbage unfortunately.

[vamsienduri]

You made my career to start in easy way...
Thank you...

[codingispower]

In a real world app, would we keep reducers in their own file so that cakes don't need to know about icecreams? In your example, cakes does not update when ice cream updates and vice versa

[inspirationalquotes]

is combineReducers still working, I'm getting this error: The slice reducer for key "cake" returned undefined during initialization.

[AnandGiri]

how to do the same in redux toolkit... i am not able to use both reducers

[ffvgdsg]

What about the course about husky, zustand and react-testing-library

[rudranshagg]

How to fix shapeAssertionError while using combineReducer in redux? i got one answer on stackOverflow but even after doing the same thing the error is not removed.😓😓

[rajnandanibhawsar]

Please create playlist for react-native testing and react-native CI/CD Integration

[Itanda]

i kept getting this error "Error: The slice reducer for key "cake" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined."

[vigneshgvs]

Note: - combineReducer function- accepts an object, each key-value pair for this object corresponds to a reducer.
- the output matches with the structure while we gave in "cake", "iceCream" keys.

- when we dispatch an action, both the reducers receive that action, but the difference is one of them acts on that action, while the other ignores it.
- each of the reducers is managing its own part of the application global state.
- the state parameter is different for every reducer & corresponds to the part of the state it manages.

[varuncharan]

Why Title is redux toolkit when you are explaining just redux ?

[piyushaggarwal]

Hi Vishwas
Please answer this question. I don't know much.
Why are you teaching redux with createStore and everything when the official docs are asking to follow redux toolkit only?

[rameshn]

Hey Vishwas awesome stuff. Can you please create a video series with TypeScript React and working with creating JSON driven UI ?

[rathore_shantilal]

Summary : Error free code
const redux = require("redux");
const createStore = redux.createStore;
const combineReducers = redux.combineReducers;

const CAKE_ORDERED = "CAKE_ORDERED";
const CAKE_RESTOCKED = "CAKE_RESTOCKED";
const ICECREAM_ORDERED = "ICECREAM_ORDERED";
const ICECREAM_RESTOCKED = "ICECREAM_RESTOCKED";

function orderCake() {
return {
type: CAKE_ORDERED,
quantity: 1,
};
}
function restockCake(qty = 1) {
return {
type: CAKE_RESTOCKED,
payload: qty,
};
}

function orderIceCream(qty = 1) {
return {
type: ICECREAM_ORDERED,
payload: qty,
};
}

function restockIceCream(qty = 1) {
return {
type: ICECREAM_RESTOCKED,
payload: qty,
};
}

// const initialState = {
// numOfCakes: 10,
// numOfIceCreams: 20,
// };
const initialCakeState = {
numOfCakes: 10,
};
const initialIceCreamState = {
numOfIceCreams: 20,
};

const cakeReducer = (state = initialCakeState, action) => {
switch (action.type) {
case CAKE_ORDERED:
return { ...state, numOfCakes: state.numOfCakes - 1 };
case CAKE_RESTOCKED:
return { ...state, numOfCakes: state.numOfCakes + action.payload };
default:
return state;
}
};
const iceCreamReducer = (state = initialIceCreamState, action) => {
switch (action.type) {
case ICECREAM_ORDERED:
return { ...state, numOfIceCreams: state.numOfIceCreams - 1 };
case ICECREAM_RESTOCKED:
return {
...state,
numOfIceCreams: state.numOfIceCreams + action.payload,
};
default:
return state;
}
};

//Root Reducer
const rootReducer = combineReducers({
cake: cakeReducer,
iceCream: iceCreamReducer,
});

const store = createStore(rootReducer);
console.log("Initial state", store.getState());

const unsubscribe = store.subscribe(() =>
console.log("Updated state", store.getState())
);

// store.dispatch(orderCake());
// store.dispatch(orderCake());
// store.dispatch(orderCake());
//

const actions = redux.bindActionCreators(
{ orderCake, restockCake, orderIceCream, restockIceCream },
store.dispatch
);
actions.orderCake();
actions.orderCake();
actions.orderCake();
actions.restockCake(3);
actions.orderIceCream();
actions.orderIceCream();
actions.restockIceCream(2);

unsubscribe();