ReactJS / Redux Tutorial - #4 Working with State and Immutability

[@inventanew]

this is a great series, I was watching the egghead tutorials, but yours is much more down to earth and less assumptions that you know what your doing already. Thank you so much.

[@academind]

Really amazing to hear that John, thanks so much for your great feedback! :)

[@ltrinhmuseum]

Maximilian is such a great teacher. It is hard to appreciate the work he puts into his tutorials, but if you have tried to learn this on your own or with a second-tier teacher you'll clearly see how great Maximilian is!

[@academind]

I cannot thank you enough for sharing such a fantastic feedback. Reading this honestly makes me happy :)

[@juliepanko]

@@academind You are truly great teacher, your manner of explanation is very clear and understandable! Thank you!

[@jean-baptistelasselle4562]

your videos are very well done, sticks to only what is technical core, with a logic and clear explanations. Nice work honestly

[@tjblackman08]

10:23 - How to handle nested arrays and objects (and why). Great vid, thanks!

[@MichaelButlerC]

I know this video is 7 years old already, but thank you anyway! I'm glad to know the basics and core concepts when learning the current versions and how it evolved over time.

[@ashleythomas3329]

I just want to say thank you so much Every time I start learning something new, your channel is the place I go to get started. School would be much, MUCH harder if I hadn't found your channel

[@academind]

And I just want to say thank YOU for your fantastic feedback Ashley! It honestly makes me happy to read that the content on our channel makes your life a bit easier :)

[@muhammadminhaj1968]

You're really a great teacher for teaching us clear programming core concept. Thank you so so much.......

[@himanshu2168]

I'm very happy after saw this video You clear my doubt about how immutable state works... A big thanks from my side. keep helping us and good will give you everything you need.

[@academind]

Thanks a lot Himanshu, great to read that the video was helpful!

[@jonyoinas1807]

For the first time I really understood how the reducer works! ...state etc are no longer magic to me! Thank you so so much!

[@academind]

Thanks again for your awesome feedback Joni, really cool to read that the series is helpful!

[@sweetbabyjesus1000]

Great stuff, thank you for taking the time to make a very good 'from the ground up' tutorial. Very clear explanations and a great pace as well.

[@academind]

Great to hear that, thanks so much Riley!

[@kalia755]

its really helpful and +1 for clarifying the spread operator and its overwriting behaviour.

[@academind]

Great to read that you liked it, thank you for your comment Kunal!

[@maciejbak6907]

Nice described this "...state"

[@dheerajmantena3307]

No.1 tutor forever @Max.....

[@academind]

Thanks again Dheeraj!

[@dheerajmantena3307]

Welcome Max. Can you make tutorials at Udemy on Progressive web application using google Polymer with web-components(also Material design components) ? I am very much impressed with that technology...It makes life easy in the modern developer world . Kindly, Please look into it if you can and make some project .Thank you again Max.....

[@SergioArroyoSailing]

Thanks so much! bests simplest barebones explanation yet! Great idea to abstract away the other elements and just show Redux itself ! Keep up the great work! =)

[@jean-baptistelasselle4562]

thank you so much, again, very good explanations, and so, the spread operator does what we generally calll a deep copy

[@dharmisettynaveen883]

Clear cut explanation sir

[@rvlglobe]

Golden nugget of knowldge, many thanks

[@academind]

Thanks so much for your comment!

[@prashmai6368]

great explaination max

[@musicofMEC]

Bro this video is amazing! Thank you, your explanation was top notch!

[@generalco2554]

@4:25 I'm not quite clear on what happened here. How is result = 123 before the next addition and console.log is executed? How could it know unless the addition has already happened?

[@igorbondarenko9854]

Finally I got it! Thanks!^)

[@academind]

Awesome to hear that, thanks for your nice feedback Igor!

[@yash6680]

11:00 -- TREASURE -- 12:00

[@vikashgauravvkg]

yeah man, that was great. I was so confused for a while but later i figured it out

[@franklins705]

the only ambiguous item in this tutorial is variable "state" being passed in through the reducer parameters. How do you reference the old passed in "state" and the newly created "state" variable under each CASE clause?

[@tambolaking5383]

I was making this mistake in my application. Thanks

[@sylvain1099]

That is very clear. Thanks for your tuto

[@academind]

Great to hear that, thanks a lot for your great feedback!

[@mailtech4580]

Great work man... Keep it up

[@academind]

Thanks so much for your great feedback, I'll try my best to keep it up!

[@EdwardMarkovich]

Excellent. Very helpful.

[@hothach80]

hello, I have an error Uncaught TypeError: Cannot create property 'result' on number '1'. Help me, how to fix it

[@sharvilakthakore8189]

in CreateStore, don't initialise state with 1. i.e. const Store = CreateStore(Reducer) instead of const Store = CreateStore(Reducer,1) since we are using Object for state in place of a Number.

[@gncfhcnvc]

thanks for the information, i had the same mistake :D

[@monisankarbarick1622]

Have any Tutorials for cart functionality?

[@nicksergeev1641]

Hi Max! Thank you for this video! But it is not fully clear to me why do you create state object without any variable creation statement(like var, let, const)? (line 44, 51) in the end of this video. Because in this case state is not an existing one object which you override so it is a little bit confusing. Thanks again

[@madhurichinthakindi9909]

Hi Max, I am enjoying the videos so far but I get an error while using "..." as the REST operator, at line 45 (in your code). I tried solutions in here babeljs.io/docs/plugins/transform-object-rest-spread/ , that solved my problem when I use that as SPREAD, but the other one is throwing an error when I use it as REST. Could you give me a solution?

[@ОлегВолков-р5ч]

You can install babel-preset-state-2 package. Add it to webpack.config file query: { presets: ["react", "es2015", "stage-2"] }

[@NIKHILYADAV-xm9ql]

Is reducer function is act same like setState method and we could consider this function also as changing state method (global state in redux store). What is the basic difference between setState method, useState hook and reducer function and when to use them Thank you 🙏🏻

[@sushantr134]

Sir, Is it a good practice or bad Practice to use `{connect}` from 'redux' library in multiple components? For Example:- Login component import this and in Signup again import this to map the state to the props.

[@ar5hadkhan]

Spread operators for object is just a proposal, not part of es6. I got confused by reading SPREAD OPERATORS ARE ONLY FOR ITERABLES on MDN. I will prefer Object.assign over spread operators.

[@ОлегВолков-р5ч]

It`s good choice too but the advantage of using the object spread syntax becomes more apparent when you're composing complex objects.

[@LucyPero]

You only have to add a plugin to Babel to make it work. More Info: redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

[@nuniezjorge]

so, redux is a tool for state management? how does it compare to bindings in xamarin (should i've said C#)?

[@undefined125]

Why if we mutate original state and log it to console, we see "{result: 101, ...}", but if we click on triangle and unwrap the object, there we see "result: 123" - from my perspective it looks like the same object at the same time has one property with two different values - how is that possible? Is that something related to asyc nature of JS? It breaks my mind...

[@PS-dp8yg]

Thank you very much for this video. Isn't reassigning state mutating state?

[@academind]

No, mutating state would mean "change the existing one". Re-assigning simply overwrite it, hence it replaces the object entirely. You could use a different/ new variable if you want though.

[@pablobello0]

Very nice, thank you

[@academind]

Happy to hear that it's helpful! :)

[@soixam7778]

thanks guys for share :D

[@academind]

Happy you're liking it!

[@pbsingh205]

i want to know how to toggle between profile and dashboard using redux... how it should be done in much effecient way... please tell me

[@HASHlRAMA]

I don't understand what is the old object, and new object. even if there were older states being used somewhere, wouldn't the object returned from store.getState() should only point to the new object? how come it console.logs both the old object and new object?

[@JuanPareles]

That was heavy but I think I am starting to understand it

[@academind]

Great to hear that Juan!

[@kbongers]

When will you be updating this series? Pretty much everything is out of date and I'm encountering issues at just about every step. It's pretty much impossible to follow along now.

[@academind]

I might create a new series in the future yes - got no concrete plans as of now. Or, to be precise: Got other ongoing projects + plans I need/ want to finish first.

[@asmaashfaq8881]

Everything is going fine with me up till now

[@drjones694]

Thank you!!!!

[@abdullahialiyu2875]

I get an error when with ...state, result: state.result + action.payload And I cant find this specific branch on github to compare my code

[@RamonAdanPentester]

You need install babel-preset-stage-2 (npm i --save-dev babel-preset-stage-2) because Spread Operator for objets is a proposal, and not be included in ES6

[@ducksauce6437]

Sir i found this to be a better approach to write reducers. (BY USING OBJECT ASSIGN METHOD) const addReducer = (state={value : 1,array : []},action)=> { switch (action.type) { case "ADD": return Object.assign({}, //empty object state, //previous state {value:state.value+action.payload,array:[state.array,state.value+action.payload]}) //new changes break; case "SUB": return Object.assign({}, state, {value:state.value-action.payload,array:[state.array,state.value+action.payload]}) default: return state; //you need to return the previous state because store calls all reducers and this reducer //needs to return the previous state in case we donot intend to call this reducer } };

[@sudhanshutripathi85]

wow explanation.

[@academind]

So happy to read that, thank you so much!

[@lovepanchal8387]

show an error Cannot read property 'result' of undefined

[@moniteddy1274]

Cannot convert undefined or null to object

[@abdennaceurnebhen7011]

great

[@academind]

Thanks so much!

[@metitusable]

You're over using the const keyword. It might to have the same meaning as in other languages but it's still called const for a reason. If you set a const to an object, which shouldn't be valid anyway, if you change the value of the properties of that object, then your object is not a constant. Consider changing that.

[@kylehassett8596]

Just use Object.assign() and skip the majority of this video. No need to use the ... syntax unless there are subobjects that you have to handle. If you don't want to worry about even that, use the package lowdash's merge method

[@johnb8739]

You should have created a udemy course on react and redux

[@academind]

I think React/ Redux is already covered pretty well on Udemy :)

[@scikick]

9 people use IE8.

[@nawabali385]

seriously! I dont want to hurt you but I can not understand this code. please try to make sure that people with no good english could understand you :)

[@MSandrade0]

Amazing thank you so much !

[@academind]

You're welcome - I'm glad that this was helpful Olivier!

[@uqairali6282]

great