Redux Tutorial - Beginner to Advanced
video description
Oh and almost forgot, great content!
Date: 2022-03-14
Related videos
Comments and reviews: 7
Priyanka
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
reply
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
reply
Vokal
I used to not like react because of redux. I started using vueJs because vuex was easy to understand.
Few months ago, I heard of redux toolkit, and watched a tutorial by Lamadev, and since then, I loved everything react.
Redux toolkit, has made working with react easier than what it would normally be.
Thanks to the guys that take their time to teach people these things, and to those that even create them
reply
I used to not like react because of redux. I started using vueJs because vuex was easy to understand.
Few months ago, I heard of redux toolkit, and watched a tutorial by Lamadev, and since then, I loved everything react.
Redux toolkit, has made working with react easier than what it would normally be.
Thanks to the guys that take their time to teach people these things, and to those that even create them
reply
Abdallah
Beginner question
How can people with Visually disability like Retinitis pigmentosa Learning Web Development
Which workflow we need to do that
Am using NVDA Screen Reader on win 10 but I don't no how I can view page source on any website or inspect website because the view page source and inspect is not accessible
reply
Beginner question
How can people with Visually disability like Retinitis pigmentosa Learning Web Development
Which workflow we need to do that
Am using NVDA Screen Reader on win 10 but I don't no how I can view page source on any website or inspect website because the view page source and inspect is not accessible
reply
Munawirul
thank you very detailed, but do I need to learn fundamental redux or learning redux toolkit will be enough. Long time ago I gave up frontend career because of redux. I am now a backend developer. But I want to learn front end once again
reply
thank you very detailed, but do I need to learn fundamental redux or learning redux toolkit will be enough. Long time ago I gave up frontend career because of redux. I am now a backend developer. But I want to learn front end once again
reply
Manivelas23
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 :)
reply
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 :)
reply
Brenno
i am from Brazil, and learning programiming, i have to improve my english too, it will be cool if they add subtitles in english on videos.
reply
i am from Brazil, and learning programiming, i have to improve my english too, it will be cool if they add subtitles in english on videos.
reply
Alex
didn't abramov admit he never used redux for production? the whole ecosystem around react is pretty much a garbage fire.
reply
didn't abramov admit he never used redux for production? the whole ecosystem around react is pretty much a garbage fire.
reply
Add a review, comment
Other channel videos
