Who else here feels like Redux is making them their brains explode? I've watched 4 other videos trying to learn it already .... this one is really helpful for sure!
I can't thankyou enough. You're a savior bro. Explaining everything with such great simplicity and clarity. I love all of your videos. Thankyou sooo muchhh.
Great respect fpr this tutorial. You don't need to rename your reducers while combining in an object, you can just write original names with comma in between and it will still work
But honestly, I wouldn't want to have "cakeReducer" as a object name, because it doesn't make sense to people viewing the object, because it isn't a reducer, it is an object containing the number of cakes.
I I were a billionaire I would have asked him to join my company as a ceo man you are so good you have prepared the lectures in a proper manners thanks a million
Really my impression level is Infinity. I have checked too many tutorial but Everytime I Was confused . why sometimes they used reducer and rootreducer together. But you are the best teacher 💘💘💘 You are amazingly the best. Lots of thanks & wishes 🥰
Hi, thank you for the amazing tutorials Before splitting into multiple reducers, I added number of Transaction in my state. initialState = { numOfCake: 10, numOfIcecream: 20, numOfTransaction: 0}; in the single Reducer, I will always add 1 to numOfTransaction for each action I have a question after splitting into multiple reducers, how to I share/keep track on the numOfTransaction information between two reducers? Thank you again.
@@LetCode96666 What do you mean by non specified actions? Also, what Vishwas said was that one reducer will ignore the action.type, but that is not true. It will act upon it. Try console.logging in side the other reducer, and see what happens. It will be called, and the switch statement will be acted upon, going to the default case.
With the reducers being splitted, each takes care of just one state, doesn't that mean the action is no longer required, as we don't really need to check the action type anymore?
I am thinking this too but in 2:36 he mentioned that when you dispatch an action, actually both iceCreamReducer and cakeReducer will receive that action. Hence why we must still check for what is the action.type
what if we have to perform multiple actions at same time. Like in this example customer wants to buy both cake and ice cream at same time. Not first he buy cake then come again to buy ice cream
i have a doubt, what if let say we have action called number and reducer add and mul, and now number action is dispatched then we know both reducers will accept it becoz it action.type requires number(0,1,2,3) now only want add reducer should receive it not the mul then how to do that?????
It works on decrement(when buying cake the number of cake decrease) but when trying to increment it malfunctions. Suppose numOfCakes-10 and when we buy it gives us 9 but when incrementing the number instead of giving 11 it gives us 101, 1011, 10111, 101111... Why? is it an intention bug?
Assuming you mean node index.js, but anyways, you have to install redux. If you are following the series, it should've been installed. But if somehow it isn't, just run "npm i redux" in terminal. If package.json doesn't exist, then run "npm init" first. (BTW, I'm assuming you mean "cannot find module redux").
you mean in both switch statements, both go for e.g. BUY_CAKE? If so, then they will both call the stuff inside the BUY_CAKE case. 2:48 is not true if this is why this confusion occurred. A comment which explains: "it doesn't ignore it, if any action.type is present there, it'll act upon it."
I have a query, createStore is marked as deprecated, after searching about it that redux team has shifted to @reduxjs/toolkit. please give solution regarding it
const redux = require('redux'); const initialCakeState = { noOfCake : 20 }; const initialIceCreamState = { noOfIceCream : 10 }; const BUY_CAKE = 'BUY_CAKE'; const BUY_ICECREAM = 'BUY_ICECREAM'; const buyCake = () => { return ( { type : BUY_CAKE } ); } const buyIceCream = () => { return ( { type : BUY_ICECREAM } ); } const reducerCake = (prevState = initialCakeState , action) => { switch(action.type) { case 'BUY_CAKE' : return {...prevState , noOfCake : prevState.noOfCake - 1}; } } const reducerIceCream = (prevState = initialIceCreamState , action) => { switch(action.type) { case 'BUY_ICECREAM' : return {...prevState , noOfIceCream : prevState.noOfIceCream - 1}; } } const combineReducers = redux.combineReducers; const rootReducer = combineReducers({ cake : reducerCake, icecream : reducerIceCream }) const store = redux.legacy_createStore(rootReducer); const listener = () => { console.log(store.getState()); } const unsubscribe = store.subscribe(listener); store.dispatch(buyCake()); store.dispatch(buyCake()); store.dispatch(buyIceCream()); store.dispatch(buyCake()); store.dispatch(buyIceCream()); unsubscribe(); Can anyone explain what is wrong with the above code i am getting the below error. e:\Redux ode_modules edux\lib edux.js:550 throw shapeAssertionError; ^ 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. at e:\Redux ode_modules edux\lib edux.js:481:13 at Array.forEach () at assertReducerShape (e:\Redux ode_modules edux\lib edux.js:474:25) at combineReducers (e:\Redux ode_modules edux\lib edux.js:539:5) at Object. (e:\Redux\File7.js:42:21) at Module._compile (node:internal/modules/cjs/loader:1159:14) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) at Module._load (node:internal/modules/cjs/loader:878:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
This channel is very underrated. Its a full course....not some preview crap that is basically an hour long sales pitch. Appreciate you bother!
Even paid courses don't make things clear as you did ; in one word awsome, thank you
Who else here feels like Redux is making them their brains explode? I've watched 4 other videos trying to learn it already .... this one is really helpful for sure!
What a crisp and precise content. Just a basic example with full focus on concepts. Superb. Keep going Vishwas.
I know little bit about redux but after watching your redux series I get very good grasp of redux. And your example of cake shop is really amazing.
NO one can make things as easy as you made in this and every other courses. You're pretty amazing.
Hi there are too many playlist on react on this channel from which playlist should I start as beginner
I can't thankyou enough. You're a savior bro. Explaining everything with such great simplicity and clarity. I love all of your videos. Thankyou sooo muchhh.
The Best Redux Explanation .Perfect
Great respect fpr this tutorial. You don't need to rename your reducers while combining in an object, you can just write original names with comma in between and it will still work
Bro, you could've said that without mentioning the lizard thing. Why you wanna make me cringed out!
Yes, but that is an ES6 method of destructuring.
But honestly, I wouldn't want to have "cakeReducer" as a object name, because it doesn't make sense to people viewing the object, because it isn't a reducer, it is an object containing the number of cakes.
redux was never so easy!! thanks a ton!!
I I were a billionaire I would have asked him to join my company as a ceo man you are so good you have prepared the lectures in a proper manners thanks a million
Really my impression level is Infinity. I have checked too many tutorial but Everytime I Was confused . why sometimes they used reducer and rootreducer together. But you are the best teacher 💘💘💘 You are amazingly the best. Lots of thanks & wishes 🥰
Thank you for this amazing explanation. You really made it very simple
Thank you .. Now I understood how Redux works, that was so clear.
I dont have words.......GREAT WORK MAN
Feeling like redux s so easy,thank you Sooooooo much.
Hi, thank you for the amazing tutorials
Before splitting into multiple reducers, I added number of Transaction in my state.
initialState = { numOfCake: 10, numOfIcecream: 20, numOfTransaction: 0};
in the single Reducer, I will always add 1 to numOfTransaction for each action
I have a question after splitting into multiple reducers,
how to I share/keep track on the numOfTransaction information between two reducers?
Thank you again.
If we have a third reducer, which responds to both actions and increases transaction state by 1,maybe that would work?
i rarely comment on videos, but bro..you make learning really easy tbh
I love Maltese accent, had so many colleagues from there :-P
Love you bro for easy explanation
2:48 is wrong, the action does not ignore it, it does stuff to it (you can even add a console.log to check if that is true, which it is).
2:48 it doesn't ignore it, if any action.type is present there, it'll act upon it.
What happens to non specified actions then? I mean what did Vishwash say wrong?
So basically action.type should not be same ?
@@LetCode96666 What do you mean by non specified actions? Also, what Vishwas said was that one reducer will ignore the action.type, but that is not true. It will act upon it. Try console.logging in side the other reducer, and see what happens. It will be called, and the switch statement will be acted upon, going to the default case.
@@mm333-e1t What is the same? We are using BUY_CAKE and BUY_ICECREAM, which aren't the same
Make things seems and look so easy
The tutorial was presented with great clarity. Thanks, Vishwas
{2022-09-27]
You are inspiration.
awesome course👍😊
How does the action when I call it using dispatch() know which reducer it should use (cake or Ice Cream)?
But Good explanation
With the reducers being splitted, each takes care of just one state, doesn't that mean the action is no longer required, as we don't really need to check the action type anymore?
I am thinking this too but in 2:36 he mentioned that when you dispatch an action, actually both iceCreamReducer and cakeReducer will receive that action. Hence why we must still check for what is the action.type
Will you do a video with multiple redux store with redux v6
please do so some ruby/ ruby on rails series...or paid course even...nodeJS tooo...will be the first to buy
sir if create separate folder for each react and redux
what if we have to perform multiple actions at same time. Like in this example customer wants to buy both cake and ice cream at same time. Not first he buy cake then come again to buy ice cream
i have a doubt, what if let say we have action called number and reducer add and mul, and now number action is dispatched then we know both reducers will accept it becoz it action.type requires number(0,1,2,3) now only want add reducer should receive it not the mul then how to do that?????
Your acction.type/s should be ADD and MUL and your payload the number/s, then you can operate differently with your numbers in your switch
It works on decrement(when buying cake the number of cake decrease) but when trying to increment it malfunctions. Suppose numOfCakes-10 and when we buy it gives us 9 but when incrementing the number instead of giving 11 it gives us 101, 1011, 10111, 101111... Why? is it an intention bug?
But it works for me! Make sure you are using number, it looks like you are getting string concatenation as output!
Hey dont we need Redux thunk to run this?
What if the action type are not present in either reducer. Since both reducer is supposed to return the default state when action type not matches.
IT WILL return the initial state for both: Updated state: { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 20 } }
thanks
what do i do when my node index command does not work? it keeps throwing error saying cannot find module
Assuming you mean node index.js, but anyways, you have to install redux. If you are following the series, it should've been installed. But if somehow it isn't, just run "npm i redux" in terminal. If package.json doesn't exist, then run "npm init" first. (BTW, I'm assuming you mean "cannot find module redux").
make sure you cd to your working repository
thanks thanks thanks thanks thanks
Can we create selector for rootReducer
what is the unsubcribe for ?
That means you no longer can do changes to the redux store since you have unsubscribed it.
what if 2 reducer has two same action.type accidentally?
that's why u define them with const on the top
so u can't declare them twice
They will probably both do something then. Try it out.
it will do both the actions , doesnot give error. tried it
you mean in both switch statements, both go for e.g. BUY_CAKE? If so, then they will both call the stuff inside the BUY_CAKE case. 2:48 is not true if this is why this confusion occurred. A comment which explains: "it doesn't ignore it, if any action.type is present there, it'll act upon it."
getting shapeAssertion Error ?
nope! Please check your code again
Check the states which you have assigned to the state parameters in your reducers
@@nitishkhanna9368 You must add default case at switch
confusing
Need a tutorial on react with laravel with authentication sir.
I think you are mistaken. codevolution is not a bartender
@@realsandeep I m requesting him. Not like u.
@@sam-rq3cq of course you are not like me. Everyone are different. I like the way you put requests.
@@realsandeep Lol:)))))
holy shit my eyes
I have a query,
createStore is marked as deprecated, after searching about it that redux team has shifted to @reduxjs/toolkit.
please give solution regarding it
const redux = require('redux');
const initialCakeState = {
noOfCake : 20
};
const initialIceCreamState = {
noOfIceCream : 10
};
const BUY_CAKE = 'BUY_CAKE';
const BUY_ICECREAM = 'BUY_ICECREAM';
const buyCake = () => {
return (
{
type : BUY_CAKE
}
);
}
const buyIceCream = () => {
return (
{
type : BUY_ICECREAM
}
);
}
const reducerCake = (prevState = initialCakeState , action) => {
switch(action.type) {
case 'BUY_CAKE' : return {...prevState , noOfCake : prevState.noOfCake - 1};
}
}
const reducerIceCream = (prevState = initialIceCreamState , action) => {
switch(action.type) {
case 'BUY_ICECREAM' : return {...prevState , noOfIceCream : prevState.noOfIceCream - 1};
}
}
const combineReducers = redux.combineReducers;
const rootReducer = combineReducers({
cake : reducerCake,
icecream : reducerIceCream
})
const store = redux.legacy_createStore(rootReducer);
const listener = () => {
console.log(store.getState());
}
const unsubscribe = store.subscribe(listener);
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyIceCream());
store.dispatch(buyCake());
store.dispatch(buyIceCream());
unsubscribe();
Can anyone explain what is wrong with the above code i am getting the below error.
e:\Redux
ode_modules
edux\lib
edux.js:550
throw shapeAssertionError;
^
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.
at e:\Redux
ode_modules
edux\lib
edux.js:481:13
at Array.forEach ()
at assertReducerShape (e:\Redux
ode_modules
edux\lib
edux.js:474:25)
at combineReducers (e:\Redux
ode_modules
edux\lib
edux.js:539:5)
at Object. (e:\Redux\File7.js:42:21)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)