you prolly dont give a shit but if you're bored like me atm you can stream pretty much all of the new series on InstaFlixxer. I've been streaming with my girlfriend for the last couple of months xD
Honestly really impressed by how you're breaking this down. Gave me perfect clarity. I had previously tried figuring out what all this was doing just by looking at previously created code and was completely lost. Your video series has helped so much
I am in the same situation. I've been presented with a new React codebase and I have been completelly lost for a week now.This videos are making everything more and more readable
Hats off 2 u such a great explanation i really needed this , i have watched all your videos of react , hook , redux , very nicely explained keep it up thanku
@@jiteshjoshisde3154 Hi Jitesh! Can we please get in touch through LinkedIn or gmail? Just search for Shivani Gaddagimath on LinkedIn and request to connect please. The first profile that pops up is mine.
vishwas sir i don't know how should i thank you cause i have followed plenty of tutorials from very famous channel of programming like Traversy Media, Mosh Hamidani but no one explained the redux as easy as you did thank you so much for this i was really struggling to learn redux but now it feels like wow
@@sourabhkumar3852 Hi Sourabh! We do have opportunities available for freshers and experienced developers. Kindly connect with me on LinkedIn. Find my contact information on my channel.
Fix to all your errors, const redux = require('redux'); const createStore = redux.createStore() // replace the above two lines with the one below import { legacy_createStore as createStore} from 'redux' also add this "type": "module", to package.json after "description": "",
@@vishwajeetyadav4480 he's storing subscribe method in a constant, and then calling it at the end to unsubscribe. "to unsubscribe from the store, call the function returned by the subscribe method
man hats off to you, what a great explanation and correlating things with a real-life example, finally understood the redux pattern, thank you so much.
@@samirvaliyev Hi Samir! Thanks for showing interest. Can we please connect on LinkedIn or gmail for more details? Please search Shivani Gaddagimath on LinkedIn and request to connect. The first profile that pops up is mine.
So put in simple terms ,the below is the Redux essence or pattern 1)we create a store 2)declare the initial state and the reducer 3)define the actions and action creators 4)subscribe to the store 5)dispatch actions to update the store 6)And finally unsubscribe to the changes (in the store).
common mistakes that could happen to beginners: the case of import statement and function to create store should be same. For example if you import Redux from 'redux' then redux.createStore won't work, use Redux.createStore or import it as redux instead of Redux. Second this is passing action function name in the reducer function that will result in undefined rootreducer, the arguments passed should be (state="state whatever it is", action).... Another thing is when you initialize the createstore at the top then dont pass () with it as it will return an undefined error. At the top where it is defined it is defined simply as redux.createstore and at the end when store is created, reducer is passed as argument to it within paranthesis
@@safalpatel2839 That's great! Can we please get in touch through LinkedIn or gmail? Just @ Shivani Gaddagimath on LinkedIn and request to connect please. The first profile that pops up is mine.
For anyone getting the error: Reducer is not a function 1) Just remove the 2nd line of code completely, it's totally unnecessary. 2) Where it said (like line 30-ish): const store = createStore(reducer) Put: const store = redux.createStore(reducer)
@Obscure Anonymous I have no idea, it's been a long time, maybe the API changed not sure. Even though I think it should work, he was just passing a reference to the method from redux package. Sorry I couldn't help in answering lol. Maybe even destructuring could work, instead of doing what I said, try on his 2nd line to write: const { createStore } = redux; Leave the bottom part as his, because in my head now it should work, but ofc it might not xD
at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loader:1065:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:17:47
hey there, great REDUX video, amazing training. one question: line 31 returns an 'UNDEFINED' everytime I run but when you run the same code, you get the initialState. confused... thank you for the series.
bro you are only 9 views away from 150k views on this video, i will complete that ... Best redux tutorials i had ever seen on any where on the internet. may you get what you want in your life ... Hare krishana ...
Hey Vishwas, First of all, thanks for creating this series, you are very good at explaining things. I have one question about tutorial 7, where you created the store and used the subscribe method but why did you assign the subscribe method to unsubscribe variable and where did this unsubscribe function come from in the last line??
I like this video. And I'm one of those idiots who learn react and redux at the same time. So, I thought this things are broken because programming for a very long time, I have witnessed the 'evolution' of programming languages, assembly to c, c++, python - as we go higher, we have less things to type and deal with. But after watching this, it looks a lot less broken ... but it is still!. I'm from an object oriented team, so that 'buyCake' function should be doing remote calls, manage the error handling and take care of emitting 'SUCCESS' and 'FAIL' scenarios, and also when it is a 'SUCCESS' scenario, the buyCake should update the current inventory and shopping cart, that means being able to fire two actions, and maybe fire another action like print receipt. This logic is not a button's responsibility.
Hello Thanks for the tutorial , i have one question : const reducer = (state = initialState , action)=>{ switch(action.type) { case BUY_CAKE : return { ...state, numofCakes:state.numofCakes-1 } we have assigned here state as initialState but action is just action , how reducer will come to know the i have defined my action function as well . Pls help
while dispatching we pass action object/action creator where we have the action defined which will reach to reducer, so reducer will understand this as its second param. Hope make sense.
I'm using "redux": "^4.0.5" and I need to mention `redux` as an object before createStore function as the following: const store = redux.createStore(reducer) Otherwise, I got ReferenceError: createStore is not defined.
I guess you could destructure and import createStore from redux library too for it to recognize in global scope. something like import { createStore } from 'redux';
Can we not use local storage to pass data from one component to another or to store data. We can create our own class component which will work as a store and we can create our own get set methods in that particular class. How is that diff from redux ? Any one please clarify
Iam Facing a problem console.log("initialstate",store.getState()) is giving undefined value but the const unsubscribe=store.subscribe(()=>console.log("Updated State",store.getState())) is working perfectly.Plzz Help me
Thank you Wishwas for your great videos, it helps me a lot to understand may things from JS or React. Just one point to this video around 6:15. To my understanding, that unsubscribe does not make much sense. You just assigned that to a const called unsubscribe. At the end of the day, it is just simply 'subscribe' method anyways and it does what is defined in the callback function once the state of the store is changed. So, in that case "console.log('Update state', ....) If you kept there just store.subscribe(() => console.log(....)), it would work exactly same as assigning that to cost unsubscribe and call this function. Or do I miss here anything? Thank you
Hi, Yes, even if we just omit the 'const unsubscribe' part, it will work fine, but why we are assigning that is - whatever returned from that assignment cancels that subscription. Means, if we call the returned function subscription is no longer valid. (If you add store.dispatch(buyCake()) after unsubscribe, you can see it no longer updates). Hope this helps. Ganesh.
Thanks a lot for your amazing tutorial, I have seen several of them. There is just one thing that killing me is how you go back and forth through that bright screen and dark one. My eyes just died please make your presentation in dark mode. I usually watch them at night so dark mode would be perfect
I am also faced this, just return object as below to avoid that error in BuyCake function . Cheers function BuyCake(){ let sample = { type: BUY_CAKE, info:'First action ' }; return sample;
You are really the best at explaining redux. I've watched 5+ others but this is so clear.
you prolly dont give a shit but if you're bored like me atm you can stream pretty much all of the new series on InstaFlixxer. I've been streaming with my girlfriend for the last couple of months xD
@Cesar Michael Yea, I have been watching on InstaFlixxer for since december myself :D
don't understand line no 32 why const unsubscribe u write ?????
Honestly really impressed by how you're breaking this down. Gave me perfect clarity. I had previously tried figuring out what all this was doing just by looking at previously created code and was completely lost. Your video series has helped so much
I am in the same situation. I've been presented with a new React codebase and I have been completelly lost for a week now.This videos are making everything more and more readable
don't understand line no 32 why const unsubscribe u write ?????
Hats off 2 u such a great explanation i really needed this , i have watched all your videos of react , hook , redux , very nicely explained keep it up thanku
Hi Swarnim! Are you a student or working currently? Would you be interested in software developer opportunities?
@@shivanigaddagimath6105 yes I want..
@@jiteshjoshisde3154 Hi Jitesh! Can we please get in touch through LinkedIn or gmail? Just search for Shivani Gaddagimath on LinkedIn and request to connect please. The first profile that pops up is mine.
@@jiteshjoshisde3154 Hi Jitesh! Please get in touch with me on LinkedIn if interested in the opportunity.
don't understand line no 32 why const unsubscribe u write ?????
Thank you so much this is the first time in my entire life to understand the concept of redux.. all the best for you
vishwas sir i don't know how should i thank you cause i have followed plenty of tutorials from very famous channel of programming like Traversy Media, Mosh Hamidani but no one explained the redux as easy as you did thank you so much for this i was really struggling to learn redux but now it feels like wow
Hi Nihal! Are you a student or working currently? Would you be interested in software developer opportunities?
@@shivanigaddagimath6105 pls comment here if you have any frontend dev opportunities
@@sourabhkumar3852 Hi Sourabh! We do have opportunities available for freshers and experienced developers. Kindly connect with me on LinkedIn. Find my contact information on my channel.
don't understand line no 32 why const unsubscribe u write ?????
You are explaining each concept clear and which good pace (not too fast not too slow.) , Thanks for it brother.
Thank you for this simple, short step by step videos for understanding Redux, I am learning this in my training at work!
don't understand line no 32 why const unsubscribe u write ?????
Fix to all your errors,
const redux = require('redux');
const createStore = redux.createStore()
// replace the above two lines with the one below
import { legacy_createStore as createStore} from 'redux'
also add this
"type": "module",
to package.json after
"description": "",
don't understand line no 32 why const unsubscribe u write ?????
Worked
i just started, but i believe it's a pure gold. Thank u a lot for this videos. I starting thinking that i can understand redux with your help.
don't understand line no 32 why const unsubscribe u write ?????
@@vishwajeetyadav4480 he's storing subscribe method in a constant, and then calling it at the end to unsubscribe.
"to unsubscribe from the store, call the function returned by the subscribe method
Finally i understood after watching so many tutorial i find your tutorial the best thanks bro 😍
don't understand line no 32 why const unsubscribe u write ?????
man hats off to you, what a great explanation and correlating things with a real-life example, finally understood the redux pattern, thank you so much.
Hi Riya! Are you a student or working currently? Would you be interested in software developer opportunities?
don't understand line no 32 why const unsubscribe u write ?????
Thank you for explaining. This is the best redux explaining I have ever seen
Hi Samir! Are you looking out for software development roles currently? Where are you based?
@@shivanigaddagimath6105 Hi Shivani. Yes
@@samirvaliyev Hi Samir! Thanks for showing interest. Can we please connect on LinkedIn or gmail for more details? Please search Shivani Gaddagimath on LinkedIn and request to connect. The first profile that pops up is mine.
don't understand line no 32 why const unsubscribe u write ?????
I don't get it why this channel has far less subscriptions that what it deserves !!!
I strongly agree
gems are rare to find .
He's not from this planet, really appreciate his work
So put in simple terms ,the below is the Redux essence or pattern
1)we create a store
2)declare the initial state and the reducer
3)define the actions and action creators
4)subscribe to the store
5)dispatch actions to update the store
6)And finally unsubscribe to the changes (in the store).
don't understand line no 32 why const unsubscribe u write ?????
1:11
getState() function = allow access to state,
dispatch(action) = allows state to be updated,
subscribe(listener) = registers listener
don't understand line no 32 why const unsubscribe u write ?????
@@vishwajeetyadav4480 where written unsubscribe ?
@@prisinha yes why hi written const unsubscribe?
@@vishwajeetyadav4480 not able to understand your question
@@prisinha 😕
common mistakes that could happen to beginners: the case of import statement and function to create store should be same. For example if you import Redux from 'redux' then redux.createStore won't work, use Redux.createStore or import it as redux instead of Redux. Second this is passing action function name in the reducer function that will result in undefined rootreducer, the arguments passed should be (state="state whatever it is", action).... Another thing is when you initialize the createstore at the top then dont pass () with it as it will return an undefined error. At the top where it is defined it is defined simply as redux.createstore and at the end when store is created, reducer is passed as argument to it within paranthesis
Thank you so much, you are such a dedicated teacher
Thanks so much! This is the first time the light switched. Superb teacher.
don't understand line no 32 why const unsubscribe u write ?????
Thanks a lot! Please consider Redux Sagas in your upcoming lessons
don't understand line no 32 why const unsubscribe u write ?????
It was a crystal clear explanation. Thanks dude...keep up😎
Hi Safal! Are you student or working currently? Would you be interested in exploring software development job opportunities?
@@shivanigaddagimath6105 Hello shivani, I am currently pursuing pgd but would love to explore about opportunities. Let me know if any!!
@@safalpatel2839 That's great! Can we please get in touch through LinkedIn or gmail? Just @ Shivani Gaddagimath on LinkedIn and request to connect please. The first profile that pops up is mine.
don't understand line no 32 why const unsubscribe u write ?????
now i got the idea of redux
thanks a lot
you really know what you are doing, you are great at teaching...congrats, and thanks a lot
don't understand line no 32 why const unsubscribe u write ?????
For anyone getting the error:
Reducer is not a function
1) Just remove the 2nd line of code completely, it's totally unnecessary.
2) Where it said (like line 30-ish):
const store = createStore(reducer)
Put:
const store = redux.createStore(reducer)
@Obscure Anonymous I have no idea, it's been a long time, maybe the API changed not sure. Even though I think it should work, he was just passing a reference to the method from redux package. Sorry I couldn't help in answering lol. Maybe even destructuring could work, instead of doing what I said, try on his 2nd line to write:
const { createStore } = redux;
Leave the bottom part as his, because in my head now it should work, but ofc it might not xD
Thanks man
Thanks Bro
Understood this in one go!
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
By far THE best tutorial on redux
...keep it up sir😎
don't understand line no 32 why const unsubscribe u write ?????
hey there, great REDUX video, amazing training. one question: line 31 returns an 'UNDEFINED' everytime I run but when you run the same code, you get the initialState. confused...
thank you for the series.
Where you got const reducer = (state, action) => {, just add const reducer = (state = initialState, action) => {
don't understand line no 32 why const unsubscribe u write ?????
Thanks for the amazing videos!
If we dispatch buy cake after unsubscribing, the state wouldnt change?
i didnt understood this fully one doubt please clarify it: when store.dispatch method is called how the store.subscribe method will get called??
createStore is deprecated, can you update for configureStore?
same error. if you found the solution then please share.
This is on of your best tutorial. Loved the way you teach sir.
Please make tutorial on React flux as well.🙏🏿
Hi Manish! Are you looking out for jobs in software development currently? We are in search of developers to join our team.
bro you are only 9 views away from 150k views on this video, i will complete that ... Best redux tutorials i had ever seen on any where on the internet. may you get what you want in your life ... Hare krishana ...
don't understand line no 32 why const unsubscribe u write ?????
Thanks a lot, bro for this awesome explanation
Hi Lalit! Are you a student or working currently? Would you be interested in software developer opportunities?
Hey Vishwas, First of all, thanks for creating this series, you are very good at explaining things. I have one question about tutorial 7, where you created the store and used the subscribe method but why did you assign the subscribe method to unsubscribe variable and where did this unsubscribe function come from in the last line??
i guess you should code this way cause it works as expected
I am also confused about it.
don't understand line no 32 why const unsubscribe u write ?????
I like this video. And I'm one of those idiots who learn react and redux at the same time. So, I thought this things are broken because programming for a very long time, I have witnessed the 'evolution' of programming languages, assembly to c, c++, python - as we go higher, we have less things to type and deal with. But after watching this, it looks a lot less broken ... but it is still!. I'm from an object oriented team, so that 'buyCake' function should be doing remote calls, manage the error handling and take care of emitting 'SUCCESS' and 'FAIL' scenarios, and also when it is a 'SUCCESS' scenario, the buyCake should update the current inventory and shopping cart, that means being able to fire two actions, and maybe fire another action like print receipt. This logic is not a button's responsibility.
Best and Easy Explanation.
Love Your Videos
Thanks
don't understand line no 32 why const unsubscribe u write ?????
great explanation step by step
very well explained
Excellent explaination sir.
You teach so well. Thank you so much
don't understand line no 32 why const unsubscribe u write ?????
A pure gem ❤
This is such quality content...Thank you
don't understand line no 32 why const unsubscribe u write ?????
Very nice and methodical.
For buy cake you are creating one more object instead you change prop in state and return the same
Always your video is awesome. Please Make example video create small website using react + react hooks + redux. using images and dynamic content.
Hi really like your series! Can you please explain in more detail what subscribe and unsubscribe methods do?
Thank you bro.
best in class teacher
What significance of Unsubscribe() method ??
Why you have not used ES6 Import statement and used require("redux"). Is there any specific reason, even you have used spread operator (...) of ES6.
watch from the beginning. he specifically addresses this.
Please further this series with redux advanced concepts such as middlewares
Hi Kirankumar! Are you a student or working currently? Would you be interested in software developer opportunities?
don't understand line no 32 why const unsubscribe u write ?????
what is the visual studio code theme you're using?
Hello Thanks for the tutorial , i have one question :
const reducer = (state = initialState , action)=>{
switch(action.type)
{
case BUY_CAKE : return {
...state,
numofCakes:state.numofCakes-1
}
we have assigned here state as initialState but action is just action , how reducer will come to know the i have defined my action function as well .
Pls help
with action.type inside 'swith' parenthesis you start your action and define it with 'case' statement. case => BUY_CAKE
while dispatching we pass action object/action creator where we have the action defined which will reach to reducer, so reducer will understand this as its second param. Hope make sense.
Hi Vijay! Good to see curious learners like you! Are you a student or working currently? Would you be interested to explore software dev roles?
Thank you
Explanation at the top of magnificence.
don't understand line no 32 why const unsubscribe u write ?????
Thanks!
I think it would be better to introduce subscribe method before dispatch because dispatch won't work without calling subscribe method before.
As per my understanding...whenever state gets updated/changed..then subscribe method gets called..so it doesn't matter if it's after/before dispatch..
very good thanks
HOLY GUACAMOLY THIS GUY IS THE BEZT
Why should dispatch an action to update state and not update store directly?
amazing example
Couldnot understand the subscribe part, when it gets called? Does it gets called automatically after dispatch method
I'm using "redux": "^4.0.5" and I need to mention `redux` as an object before createStore function as the following:
const store = redux.createStore(reducer)
Otherwise, I got ReferenceError: createStore is not defined.
I guess you could destructure and import createStore from redux library too for it to recognize in global scope. something like import { createStore } from 'redux';
@@kanikarungta4452 Hi Kanika! Are you a student or working currently? Would you be interested in exploring jobs in software development?
don't understand line no 32 why const unsubscribe u write ?????
What is the font settings for your VSCode ?
after dispatching buyCake() how action calls the reducer?
i'm having the same question, but I think by calling createStore and passing reducer to it.
Hi Abhishek! Are you a student or working currently? Would you be interested in exploring jobs in software development?
@@shivanigaddagimath6105 I am working but not looking for job change.
@@Abhishekkumar-vd5ov Okay. Thanks for your reply.
I am facing this error:
Initial state 10
Updated state { numberOfCakes: NaN}
Updated state { numberOfCakes: NaN}
Updated state { numberOfCakes: NaN}
Hi Aman! Are you a student or working currently? Would you be interested to explore software dev roles?
Hi bro.
Are there any breaking changes from react-redux v6 to v7.
For using react-redux with hooks
Hi Srikanth! Are you looking out for jobs in software dev currently? We are hiring!
What if I want to create 2 stores but I am restricted to give variable name as initialState for initial state, how to do that.
Hi Piyush! Are you a student or working currently? Would you be interested to explore software dev roles?
Can we not use local storage to pass data from one component to another or to store data. We can create our own class component which will work as a store and we can create our own get set methods in that particular class. How is that diff from redux ? Any one please clarify
What reducer function do here ?
When you type node index in terminal you are getting what you written in console am not getting it am a beginner can you explain me this
Really awesome …
Sir what if we don't use subscribe..?
can you make video on using redux with redux saga ?
reason why we do "cosnt unsubscribe = ~" is store.subscribe() returns a ""function"" for unsubscribing listener!
Initial state undefined also
sir, where are you from ???
i had this error : "Expected the reducer to be a function."
const redux = require('redux');
const createStore = redux.createStore; [ here not redux.createStore(); ]
@@mizanalharun57 thanks!
remove line2 and replace line30 by
const store = redux.createStore(reducer)
It worked for me
@@bishnulama7520 thanks, this worked for me
@@mizanalharun57 thank you bro....... I was too confused...
Iam Facing a problem
console.log("initialstate",store.getState())
is giving undefined value
but the const unsubscribe=store.subscribe(()=>console.log("Updated State",store.getState()))
is working perfectly.Plzz Help me
You must be missing the default in switch statement or you might not have used return keyword in default.. I was also facing the same issue. It worked
@@apoorvtiwari7612 It helped me, thanks!
Hi everyone. Can anyone explain how does calling unsubscribe() actually tells redux to unsubscribe?
I also have the same question
Thank you Wishwas for your great videos, it helps me a lot to understand may things from JS or React. Just one point to this video around 6:15. To my understanding, that unsubscribe does not make much sense. You just assigned that to a const called unsubscribe. At the end of the day, it is just simply 'subscribe' method anyways and it does what is defined in the callback function once the state of the store is changed. So, in that case "console.log('Update state', ....)
If you kept there just store.subscribe(() => console.log(....)), it would work exactly same as assigning that to cost unsubscribe and call this function. Or do I miss here anything? Thank you
Hi,
Yes, even if we just omit the 'const unsubscribe' part, it will work fine, but why we are assigning that is - whatever returned from that assignment cancels that subscription. Means, if we call the returned function subscription is no longer valid. (If you add store.dispatch(buyCake()) after unsubscribe, you can see it no longer updates).
Hope this helps.
Ganesh.
don't understand line no 32 why const unsubscribe u write ?????
why not we just pass intial state as an parameter to createStore function
const store = createStore(initState)
I am having this error please help
Initial State { numofCakes: 10 }
Updated State { numofCakes: 10, numOfCakes: NaN }
Typo in the key... use numOfCakes in both places
After I ran the code my output is like
10,9,9,9 why 🤔
my output is like,
Initial state : [object Object]
update state : [object Object]
update state : [object Object]
update state : [object Object]
How does it get initialState, it is passed as default param?
it is passed as a parameter in this line..
const reducer = (state = initialState, action) => {
thanks
guys, what's the name of this theme ? I love this colors
Nord
amazing 👍👍👍👌👌
request: can we have react-redux typescript series? hehehe
Finally, I can speak English indian accents
Can you share file slide ? Thank you.
What if we don't unsubscribe ?
Are these videos still useful in 2022 or are they outdated ?
Expected the root reducer to be a function. Instead, received: 'undefined'
im getting above error
Same
Thanks a lot for your amazing tutorial, I have seen several of them. There is just one thing that killing me is how you go back and forth through that bright screen and dark one. My eyes just died please make your presentation in dark mode. I usually watch them at night so dark mode would be perfect
Error: Actions must be plain objects. Use custom middleware for async actions.
error what solve
when node index
I am also faced this, just return object as below to avoid that error in BuyCake function . Cheers
function BuyCake(){
let sample = {
type: BUY_CAKE,
info:'First action '
};
return sample;
}
you should use a middleware which is 'redux-thunk' for async actions.
Please make videos on redux toolkit and rtk query
it is throwing an error for me
I don't understand one thing: how is unsubscribe an instance of subscribe?
+1
+1