React Redux Tutorials - 7 - Store
HTML-код
- Опубликовано: 30 сен 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
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 ?????
createStore is deprecated, can you update for configureStore?
same error. if you found the solution then please share.
i didnt understood this fully one doubt please clarify it: when store.dispatch method is called how the store.subscribe method will get called??
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.
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 ?????
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
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 ?????
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
I don't get it why this channel has far less subscriptions that what it deserves !!!
I strongly agree
gems are rare to find .
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]
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?
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 ?????
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 ?????
reason why we do "cosnt unsubscribe = ~" is store.subscribe() returns a ""function"" for unsubscribing listener!
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!
Thanks a lot! Please consider Redux Sagas in your upcoming lessons
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
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 😕
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 ?????
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?
why we need unsubscribe ??
+1
It's required once you are done with that element and you no longer want to monitor it's state change.
This video is outdated please update this one as createStore method is deprecated
same error. if you found the solution then please share.
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
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 ?????
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 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...
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.
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?
it is throwing an error for me
Thanks for the amazing videos!
If we dispatch buy cake after unsubscribing, the state wouldnt change?
and how the fuck i am getting this for free...man im following maximillian(big fan of him too) on udemy and that guy fucked my head while explaining redux.....i came on youtube and found this man....big fan sir big fan..will surely check out your courses,,..
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 ?????
Feedback is that Vishwas should never include Node JS into React JS
Always your video is awesome. Please Make example video create small website using react + react hooks + redux. using images and dynamic content.
My answer is coming 10,9,9,9, not decreasing, any one can help
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
What significance of Unsubscribe() method ??
Listen at 1.04 or 1.05 there is a telephone ringing....so what?😅
Finally, I can speak English indian accents
Hi really like your series! Can you please explain in more detail what subscribe and unsubscribe methods do?
Hi everyone. Can anyone explain how does calling unsubscribe() actually tells redux to unsubscribe?
I also have the same question
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 ?????
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!
can you make video on using redux with redux saga ?
now i got the idea of redux
thanks a lot
Are these videos still useful in 2022 or are they outdated ?
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 ?????
You are explaining each concept clear and which good pace (not too fast not too slow.) , Thanks for it brother.
title is react redux but goes on to use vanilla js
createStore has been deprecated 😢
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.
very good thanks
What reducer function do here ?
Couldnot understand the subscribe part, when it gets called? Does it gets called automatically after dispatch method
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?
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
very well explained
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 ?????
TypeError: CreateStore is not a function showing this error in the terminals
same error. if you found the solution then please share.
CreateStores depreatiated
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 ?????
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
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
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 ?????
Thank you so much this is the first time in my entire life to understand the concept of redux.. all the best for you
For buy cake you are creating one more object instead you change prop in state and return the same
best in class teacher
why not we just pass intial state as an parameter to createStore function
const store = createStore(initState)
what is the visual studio code theme you're using?
He's not from this planet, really appreciate his work
Why should dispatch an action to update state and not update store directly?
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 ?????
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) => {
Please make videos on redux toolkit and rtk query
Sir what if we don't use subscribe..?
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 :)
request: can we have react-redux typescript series? hehehe
Anyone can explain the flow of execution please
If I understand correctly,
- First, a store is created using createStore() method
- Then the subscribe() method listens to any state change events
- Whenever we dispatch an action like buyCake(), reducer handles it and updates the state
- This state update is being listened by subscribe() method hence it logs the updated state
- Unsubscribe is simply to tell you application to stop listening to any state changes further
Hope it helps!
Can you share file slide ? Thank you.
What if we don't unsubscribe ?
Thank you so much, you are such a dedicated teacher
What is the font settings for your VSCode ?
10 April 2021
Thanks!
HOLY GUACAMOLY THIS GUY IS THE BEZT
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..
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 ?????
Very nice and methodical.
Expected the root reducer to be a function. Instead, received: 'undefined'
im getting above error
Same
Excellent explaination sir.
Thank you. But you are just making things confusing, unsub = sub?
great explanation step by step
Initial state undefined also
sir, where are you from ???
Understood this in one go!
How the case Buy_cake works is that funtion....
please go through W3School JS switch case! You will get a better understanding! I was also confused first time :)
Best and Easy Explanation.
Love Your Videos
Thanks
don't understand line no 32 why const unsubscribe u write ?????
Why can't you do it in class components
guys, what's the name of this theme ? I love this colors
Nord
sir it is giving me error