Redux Tutorial - Beginner to Advanced

Learn how to use Redux in this full course for beginners. You will learn how to use Redux with ReduxToolkit Library to create an application involving HTTP requests.

⭐️ Course Contens ⭐️
⌨️ (0:00:00) Introduction and Overview of Tutorial
⌨️ (0:00:58) Basic Terminologies
⌨️ (0:02:20) Counter App With react-redux
⌨️ (0:16:11) Using Redux Toolkit
⌨️ (0:24:34) Shopping Cart Project - Introduction
⌨️ (0:25:53) Shopping Cart Project - Auth Slice State
⌨️ (0:37:49) Shopping Cart Project - Cart Slice State
⌨️ (0:57:11) Incrementing and Decrementing Items From Cart
⌨️ (1:06:00) Adding Logout State
⌨️ (1:08:03) Using Firebase with Redux
⌨️ (1:11:11) Sending asynchronous HTTP Requests with Redux
⌨️ (1:17:05) Adding Notifications with Material UI
⌨️ (1:19:02) Adding Notification slice state
⌨️ (1:27:24) Using Redux Thunk Pattern
⌨️ (1:28:37) Creating Thunk Pattern with redux
⌨️ (1:32:22) Sending GET HTTP request with Redux
⌨️ (1:40:51) Summary of the course

--

[IndianCoders]

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 ❤️.

[prisinha]

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

[soumadip_skyy_banerjee]

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

[shubhampatil]

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

[M]

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 :)

[HuziDev]

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

[SwagatVlogs]

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.

[eduardorodriguezperez]

To the point and clear. Thanks for the lessons!

[czancdy]

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

[WarrenBey]

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

[racheledwards]

Any English version of this tutorial please?

[MuhammadYasirGhaffar]

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

[matthayden]

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!!!

[adrian-mihairosu]

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

[ericblancas]

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.

[jsr]

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?

[zohdetamimi]

if you watching this tutorial right now you should face some issues at 53 mins coz in the last commit he did, he change cart-slice that's he wrote in the video to ( cartSlice ) so you just need to rename the file and every thing will be okay

[RaghavendraGowda]

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 :)

[samarthm]

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

[adis]

This guy is rushing through the material like a maniac; beginner tutorial my ass