Redux Tutorial - Beginner to Advanced 

Thank you, Beau, for sharing this course on the most loved channel of developers. Would love to contribute to this awesome community in future as well ❤️.

my notes requests further correction from learners 2:00 redux terms 2:22 npx create-react-app appName 2:35 cd appName 2:42 npm install redux react-redux 3:00 create folder store inside src folder 3:15 create index file in store folder 3:20 to handle all react states 3:30 redux contains createStore 3:35 store is created from createStore function 3:40 createStore function needs a reducer function as its param 3:45 reducer function to be an arrow function 4:00 reducer function to have two params state and action 4:05 action will have two params type and payload 4:24 initial value of state defined as an object 4:44 app file to contain initial value of state defined as an object 4:50 root file index has to provide access of central store to entire application and root file index contains App component 5:10 react-redux contains Provider 5:25 wrap App component with Provider component in root index file 5:44 export of store component as default 5:50 root file index imports store component and attaches store component as prop to Provider component 6:05 header element and its contents are replaced by 6:30 react-redux contains useSelector function 7:00 useSelector is an arrow function with state as param and returning counter from state 7:30 counter variable assigned to keep outcome from useSelector function 7:40 output of counter passed to UI as JSX 7:45 error in compile 7:50 debug error 8:15 return value of state to reducer function 8:20 possibility of changing initial value of counter 9:00 Increment and Decrement Buttons added 9:15 event handler arrow functions increment and decrement defined 9:40 dispatch an action 10:00 react-redux contains useDispatch function which will help to dispatch an action 10:05 when unique action is provided in App file then index file in store will fetch action 10:15 dispatch variable assigned outcome of useDispatch function 10:40 dispatch function to contain param with key type and value INC in App component 11:00 limitations of reducer function within index file of store folder 11:11 first limitation is on usage of sync function within index file of store folder 11:15 second limitation is mutation of original state not allowed within index file of store folder 11:30 possibility of application crash due to index file of store folder 11:33 copy of original state is allowed within index file of store folder 11:50 if action object has key type which strictly equals INC within index file of store folder 12:45 then assign a new value to counter within index file of store folder 13:15 dispatch function to contain param with key type and value DEC in App component 13:30 if action object has key type which strictly equals DEC within index file of store folder 13:45 then assign a new value to counter within index file of store folder 14:14 Add by 10 button added in App component 14:20 event handler arrow function addBy defined in App component 14:40 dispatch an action within addBy function in App component 14:49 addBy function to return dispatch function to contain param with key type and value ADD along with second param with key payload and value 10 in App component 15:15 if action object has key type which strictly equals DEC within index file of store folder 13:45 then assign a new value to counter within index file of store folder 15:00 sending data from App component to index file of store folder 16:16 redux toolkit 17:00 documentation on reduxjs toolkit 17:11 api included into reduxjs toolkit 17:50 RTK Query helps to mutate state 18:30 npm intall reduxjs toolkit 18:40 reducer function removed from index file of store folder 18:45 reduxjs toolkit contains configureStore and createSlice within index file of store folder 19:00 createSlice function assigns its outcome to counterSlice within index file of store folder 19:15 createSlice function to contain object as its param where first key is name and its value is counter within index file of store folder 19:22 createSlice function to contain object as its param 19:25 where second key is initialState and its value is an object with key counter and value 0 within index file of store folder 22:45 error corrected by colon after initialState within index file of store folder 19:33 createSlice function to contain object as its param where third key is reducers and its value is an object with first key as increment function 20:15 with two params state action which return amended value of counter of state object 23:23 error corrected by removing hard coded value in expression and second key as decrement function 20:24 with two params state action which return amended value of counter of state object 23:23 error corrected by removing hard coded value in expression and third key as addBy function 20:30 with two params state action which return amended value of counter of state object within index file of store folder 23:45 error corrected by addition assignment operator to return amended value of key counter of object state assigned from key payload of object action within index file of store folder 20:42 configureStore function assigns its value to store within index file of store folder 20:50 configureStore function to contain object as its param where first key is reducer and its value is reducer key from object counterSlice within index file of store folder 21:00 export actions with key actions from object counterSlice and 23:00 error corrected by export default store within index file of store folder 21:21 import actions from index file of store folder within App component 21:50 dispatch function will not contain any object with key-value pair as hard-coded values but object with its function within App component 22:22 addBy function within dispatch function within App component 23:33 error corrected by replacing hard coded values by action object with key payload 22:33 error debug 24:00 UI output

Just when I needed it! Are y'all reading our minds now? 🥺

I have gone through many tutorial just to understand how to setup redux. After going through first 12 minutes, I got to know it finally. Excellent step by step explanation!!!

A truly amazing tutorial. Fast-paced, well explained, and backed by practice.

Thank you, this was a much needed one

Thank you. Very nice course, nicely planned, good pace, all clean & clear. Learned a lot.

such an important topic to cover in the javascript / react ecosystem. Some devs out there really under value redux ever since context api was introduced but a good majority of the market still uses redux, plus context imo is seen more as a dependancy injection rather than state management.

Exactly what i wanted (introduction with a small project and then implementation with a bigger project).

Exactly what I needed!!

you've to be more specific about what every functions are doing and why we are doing export, counteSlice.actions etc

Waiting for this course .🤝👍

Damn! Worked like a charm! Thank you soooo much!

It's for the people who already know redux and wants to revisit, otherwise beginners will end up scratching their heads.

This guy is teaching to those who knows redux very well...

I haven't started but i already have a feeling that it will be interesting and smooth.

Great Tutorial, *I will now work on my project*

Thank you so much for your support and for a great video 👍🏼⭐🎉🙏🤛

Before I watched this tutorial, I really struggled to understand Redux. But this tutorial has massively helped me understand Redux better, so thank you for an excellent tutorial!!

Thanks for this wonderful tutorial!

Thank you so much . It's a great tutorial.

Thanks a lot Nikhil, Watched full tutorial, Helped a lot.😃

Huge thanks from the community.

Just started the redux tutorial of free code camp, thanks for this.

The best tutorial. Helped me to understand redux toolkit

Needed this badly.

great timing.. i just started learning React

Very Helpuful, Thank you very much Sir!

Thank you, I've learned a lot about Redux from your video.

That's Great! Thank you so much.

Great instruction! Just a little question: when did you add dispatch to useEffect dependencies and why you added that? Is it necessary? What does it do?

I'm getting into react now and noticed a lot of people simply refer to using the context API as opposed to redux, stating that only complex projects need redux. How does one know when to use one over the other without years of experience? What features / caveats will push one towards utilizing redux in their project?

I was waiting for this

Thank you for the video!

Thank you very much for making this free, may God reward you

*Thank you so much ... It is very helpful ... You are awesome ...*

clear and concise

Please give proper pause and speak slow in your next videos. You sound nervous and the users have to pause or scramble more through the video to understand what you are trying to convey. Overall, this video was informative and detailed. Thank you.

Thanx for this tutorial man. It really helped everyone. I have a few questions. I am developing a shopping application. I have a list of products on the homepage. Each product have 'favorite' toggle icon. The toggle icon is will change the color once I click it(favorite and unfavorite). I am showing the based based on the property 'isFavorite' present in that product's object. Now my requirement is. 1-How to change the state of the favorite product into the redux state when I toggle favorite any item? I have maintained two states in my redux store, favorites: [] and allProducts: []. When I add or remove anything into the 'favorite' array I have to toggle the 'isFavorite' property of that product into the 'allProducts' array. Any help would be appreciated. Thank you.

Man I love you guys... Whenever I need to learn something for my project, you guys have it.. Do you read my mind???

I recommend to go throught the redux from the tutorial point then do watch this video to grasp the knowledge .. I did it in this way.

fantastico!

Thanks you so much 👍🏼🙏🎉⭐

Thanks for the course.

Hello! You should do a long video on C, I think a lot of people (myself included lol) would appreciate it!

Great Video ! :)

Waw nice tutorial 🤩

i thought it was a Beginners course, but this man is in his own world. sorry to say that

35:32 // tp login 43:25 // tp cart 44:13 // index store 46:03 // use store cart

Nikhil bhai . 👍👍👍

Thank you for the tutorial, i tried to develop one small app using redux toolkit, however , i have one bug , can't rectify?

OH thank you so much youtube for creating the subtitles and thank u for the video it really helpfull

Thank you very much

This is insane you guys are mind readers

This is just feedback and not hate. By talking more slowly, you can improve your accent and we can understand more clearly what are you saying :)

How are you able to use `createStore` as this function that has not been officially deprecated in Redux as of my knowledge cutoff date (September 2021).

Why exactly do we need to add the second thunk pattern, the fetchData one ? Not sure if I fully understand the Thunk method in redux!!

Thanks a lot.

I don't think the HOW without the WHY approach to teaching is very good.

Cannot read properties of undefined (reading 'find') if you counter this issue , Please add "state.itemsList = action.payload.itemsList ?? [];" in replaceData method of store cart-slice.js. Hope it helps someone :)

Thankyou Dev team 😍

Thank you bro

Hi, i got this error while trying to checkout from the StartingApp error: pathspec 'StartingApp' did not match any file(s) known to git

I thought of following along the video but there is no source code. So, gonna find some another course

Thanks

thanks bahut badhiya

How do use Redux to show data on page load ? I have an action in my slice to fetch all data from a REST API, then I dispatch that action from useEffect but it doesnt work :( 😢😭😞

Thank you

if you're working with react it's mandatory to learn some state managing library (pref redux). It's also worth to mention that redux has released redux-toolkit (supposedly easier to use ), with built in utilities and it's powerful too. Oh and almost forgot, great content!

That Indian accent 🤍! Love you so pleased to learn

Thanks a lot

thaat whaat i waant thank you

Help me resolve my scenario, I am using redux for nested material table. While moving parent to child table my redux details are getting blank… please suggest me for the solution

Getting an error ( around 40:17 mins into the tutorial) when creating the cartSlice Reducer in cart-slice.js . I have written the same code and everything was working fine till now. WHen defining the addToCart reducer, it shows " Signature declarations can only be used in TypeScript files.ts(8017)" . Not sure why am getting this error, have written same code . If anyone else facing similar issue, please HELP. Stuck here!!

I feel this guy talks like The Flash runs, but all in all grateful for the content.

Atlast the number of acart items are not shown in top... im getting NaN cart... can anyone help i think some problem with cart.totalQantity

state.counter++ and ++state.counter. the first one return state.counter before executing plus operation, and the rest is versa.

Please, a detailed tutorial for flutter Getx

Just at the right time

thank you sir

The createStore is deprecated and i can't find a single video where some one is using the configureStore

update plz now, createStore() is replaced by configureStore()

The best redux video ever!! Well done buddy!!

great video

Hi, Can't find code in the github repo. Is it removed? Can anyone share the github link please.........

thank you

You should know use reducer use context use state before learning redux it will make a lot easier to understand

Guys how can we make a multilanguage website with react redux ?

Any English version of this tutorial please?

What's the extensions that enables you to autocomplete the code and also tells you the argument types??

Where is the address of the github repository for this course?

create store not working and not importaing what should we do

The explanation are all over the place.

Flutter Redux ❤️

trying to become a better front-end dev as a mostly backend specialized dev... full-stack one day!!!

Amazing guide! I have a small question regarding your redux normalization, shouldn't it be more complex when it comes to creating a normalization for redux? Or did you design the normalization for this project simple since it's just a beginner tutorial?

1:37:27 replaceData(state, action) { state.totalQuantity = action.payload.totalPrice; state.itemsList = action.payload.itemsList; }, can anyone explain why he has written state.totalQuantity = action.payload.totalPrice;

please upload the code in github website because your code is not visible

If I will now say that you are doing good work, then , if i will now thank you for putting in the effort. 😂😂 There were a lot of " if i will now" in this tutorial , but i am not mocking you, you have been very helpful, despite the " if i will now's" Seriously, thanks

Vat is "campo nents"? Haw abawt "beten selecter"?