React Redux Tutorials - 7 - Store
ฝัง
- เผยแพร่เมื่อ 27 ส.ค. 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Store in Redux
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 ?????
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 ?????
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 😕
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
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 ?????
Thank you so much this is the first time in my entire life to understand the concept of redux.. all the best for you
You are explaining each concept clear and which good pace (not too fast not too slow.) , Thanks for it brother.
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 ?????
I don't get it why this channel has far less subscriptions that what it deserves !!!
I strongly agree
gems are rare to find .
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 ?????
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 ?????
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 ?????
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
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 ?????
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 ?????
He's not from this planet, really appreciate his work
Thanks so much! This is the first time the light switched. Superb teacher.
don't understand line no 32 why const unsubscribe u write ?????
createStore is deprecated, can you update for configureStore?
same error. if you found the solution then please share.
Thanks a lot! Please consider Redux Sagas in your upcoming lessons
don't understand line no 32 why const unsubscribe u write ?????
Thank you so much, you are such a dedicated teacher
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.
now i got the idea of redux
thanks a lot
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 ?????
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 ?????
Understood this in one go!
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?
By far THE best tutorial on redux
...keep it up sir😎
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.
You teach so well. Thank you so much
don't understand line no 32 why const unsubscribe u write ?????
very well explained
Best and Easy Explanation.
Love Your Videos
Thanks
don't understand line no 32 why const unsubscribe u write ?????
great explanation step by step
Thanks for the amazing videos!
If we dispatch buy cake after unsubscribing, the state wouldnt change?
A pure gem ❤
For buy cake you are creating one more object instead you change prop in state and return the same
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 ?????
Excellent explaination sir.
Thanks!
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 ?????
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?
Always your video is awesome. Please Make example video create small website using react + react hooks + redux. using images and dynamic content.
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 ?????
best in class teacher
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 ?????
This is such quality content...Thank you
don't understand line no 32 why const unsubscribe u write ?????
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?
What significance of Unsubscribe() method ??
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?
reason why we do "cosnt unsubscribe = ~" is store.subscribe() returns a ""function"" for unsubscribing listener!
Hi really like your series! Can you please explain in more detail what subscribe and unsubscribe methods do?
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]
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 didnt understood this fully one doubt please clarify it: when store.dispatch method is called how the store.subscribe method will get called??
Very nice and methodical.
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.
Explanation at the top of magnificence.
don't understand line no 32 why const unsubscribe u write ?????
very good thanks
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 ?????
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!
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...
HOLY GUACAMOLY THIS GUY IS THE BEZT
Thank you bro.
Couldnot understand the subscribe part, when it gets called? Does it gets called automatically after dispatch method
Why should dispatch an action to update state and not update store directly?
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
amazing example
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
Thank you
What reducer function do here ?
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
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
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) => {
Hi everyone. Can anyone explain how does calling unsubscribe() actually tells redux to unsubscribe?
I also have the same question
what is the visual studio code theme you're using?
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!
Initial state undefined also
What is the font settings for your VSCode ?
Really awesome …
why not we just pass intial state as an parameter to createStore function
const store = createStore(initState)
Feedback is that Vishwas should never include Node JS into React JS
Finally, I can speak English indian accents
thanks
TypeError: CreateStore is not a function showing this error in the terminals
same error. if you found the solution then please share.
it is throwing an error for me
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.
can you make video on using redux with redux saga ?
Expected the root reducer to be a function. Instead, received: 'undefined'
im getting above error
Same
Are these videos still useful in 2022 or are they outdated ?
request: can we have react-redux typescript series? hehehe
don't understand line no 32 why const unsubscribe u write ?????
The store.subscribe method returns a function . You can call it whatever you want in this case he called it unsubscribe which stops the subscription
Sir what if we don't use subscribe..?
createStore has been deprecated 😢
Listen at 1.04 or 1.05 there is a telephone ringing....so what?😅
My answer is coming 10,9,9,9, not decreasing, any one can help
6:33 Summary
This video is outdated please update this one as createStore method is deprecated
same error. if you found the solution then please share.
amazing 👍👍👍👌👌
A small doubt:
You always pronouncing '=' symbol as 'equals to '.
But i heard that in programming '=' symbol is pronounced as 'assign'
and double '=' symbol ('==') is pronounced as 'equals to'
Which is correct ???
"Equal to" is how = is read mathematically in everyday English, so it is something we commonly hear and understand without much thought. == as "is equal to" is correct in the context of programming because it is a comparison in the same way as a single = is mathematically. Often times we still refer to = as "equal to" in everyday English though out of habit. Really, = means assign as in "x assigns value y". Some people say assign for accuracy and to try to prevent confusion between = and ==, but also a lot of English speakers are not used to hearing it so many of us just say equal to out of habit. Everyday English is a language where convention often overrules accuracy :)