Redux Tutorial - Beginner to Advanced
HTML-код
- Опубликовано: 5 июн 2024
- 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.
✏️ Nikhil Thadani created this course. Check out his RUclips channel: / @indiancoders
💻 Code: github.com/Nikhilthadani/Redu...
⭐️ 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
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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 ❤️.
the creator who spent more than 5 hours making this video. you deserve more credit 👍
Please Could u make a video with react_redux multi language website Pleaseeee
nice video , but is very hard to undestend your english (im from spain)
thanks for giving this advanced redux it could be useful for top company placements
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
Thanks for this, I wish they pin this comment.
Thanks! Super helpful!
Wow...thanks buddy it helped me alot🙏🙏🙏
I respect your hardwork
it's inexpressible in words
wow
Just when I needed it! Are y'all reading our minds now? 🥺
yeah
relatable.
It's happening all over internet for me.
I think they are Sky B.
@@54peace hell yeah
@@darsh_shukla Oh achha
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.
It's for the people who already know redux and wants to revisit, otherwise beginners will end up scratching their heads.
If you're struggling with this then it means you aren't familiar with useReducer. IMO, anyone who isn't familiar with useReducer has no business with Redux.
This guy is teaching to those who knows redux very well...
Exactly his teachings are not simplified atall
Let them bring in pierce harbor
exactly....he is not giving basic explanation also
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.
you've to be more specific about what every functions are doing and why we are doing export, counteSlice.actions etc
i thought it was a Beginners course, but this man is in his own world.
sorry to say that
i agree, i cant follow his fast-paced explanation😢
He isn’t even explaining atall
yeah man seriously
Agree, very fast
he's just indian lmao
Waiting for this course .🤝👍
Exactly what I needed!!
Thank you, this was a much needed one
Thank you. Very nice course, nicely planned, good pace, all clean & clear. Learned a lot.
Exactly what i wanted (introduction with a small project and then implementation with a bigger project).
I haven't started but i already have a feeling that it will be interesting and smooth.
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?
You'll know, it literally will came in to your view as a solution and you will feel the need to use it. As I can say, use Redux if you're dealing with too much global states and too much updates of them.
context is good for static values or when components are using the whole of the state context, if you have many components only using part of the state something such as redux is better. this is because your components using part state will be re-rendered when the context state is updated even if the value doesn't directly effect the component
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?
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.
Great Tutorial, *I will now work on my project*
Needed this badly.
Damn! Worked like a charm! Thank you soooo much!
Huge thanks from the community.
Thank you so much . It's a great tutorial.
Thank you so much for your support and for a great video 👍🏼⭐🎉🙏🤛
Just started the redux tutorial of free code camp, thanks for this.
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!!
What is this for? What is a redux for?
Hello! You should do a long video on C, I think a lot of people (myself included lol) would appreciate it!
Very Helpuful, Thank you very much Sir!
That's Great! Thank you so much.
great timing.. i just started learning React
Thanks for this wonderful tutorial!
fantastico!
Thank you for the video!
Thanks a lot Nikhil, Watched full tutorial, Helped a lot.😃
Thank you very much for making this free, may God reward you
Thank you, I've learned a lot about Redux from your video.
The best tutorial. Helped me to understand redux toolkit
I was waiting for this
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.
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.
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!
has people started using redux toolkit in real world projects?...most projects might still use the normal redux
@@joe86569 hey, yep redux-toolkit is quite popular already :). I'd agree that most projects still use redux, but that's quite normal. I wouldn't refactor my whole redux setup along with all utils just to replace it with redux-toolkit.
Although when starting a new project people tend to choose redux-toolkit over redux.
Am i the only one who thinks redux toolkit is difficult than vanilla redux?
@@SandeshMotoVlogs your are not alone in this
Great Video ! :)
*Thank you so much ... It is very helpful ... You are awesome ...*
Nikhil bhai . 👍👍👍
clear and concise
I don't think the HOW without the WHY approach to teaching is very good.
Waw nice tutorial 🤩
That Indian accent 🤍! Love you so pleased to learn
Thanks you so 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 :)
Thank you very much
Thankyou Dev team 😍
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 so much
Thanks for the course.
Thank you for the tutorial, i tried to develop one small app using redux toolkit, however , i have one bug , can't rectify?
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
Please, a detailed tutorial for flutter Getx
Thanks a lot.
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
Did u try mobx,.. i was a redux saga fan until I saw mobx in action... initially i hated mobx because of its name,… but now i say I love mobx,.. it makes state mgmt soooooo simple,..
@@pradeepbetty Can you explain more
@@prisinha Mobx makes state mgmt more simpler and easier than redux-saga and redux-thunks. mobx uses observer pattern and reduces the amount of code that we need to write.
since it uses the observer pattern, it passes the changed state to the components that subscribed to the state change.
impl. in a component is also very simple. just subscribe to the state. changes will be notified to the component.
@@pradeepbetty I’ll check it out. But Redux is more popular in the job market
You'll be surprised there is an even easier tool to manage state than redux toolkit, it's called recoil. I've been in love with recoil since the day i discovered this library and i'll probably won't come back to redux.
Thanks
Thank you bro
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
Thanks
thanks bahut badhiya
great video
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?
I feel this guy talks like The Flash runs, but all in all grateful for the content.
I thought of following along the video but there is no source code. So, gonna find some another course
OH thank you so much youtube for creating the subtitles and thank u for the video it really helpfull
35:32 // tp login
43:25 // tp cart
44:13 // index store
46:03 // use store cart
You should know use reducer use context use state before learning redux it will make a lot easier to understand
Thanks a lot
The best redux video ever!! Well done buddy!!
Man I love you guys... Whenever I need to learn something for my project, you guys have it.. Do you read my mind???
trying to become a better front-end dev as a mostly backend specialized dev... full-stack one day!!!
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).
state.counter++ and ++state.counter. the first one return state.counter before executing plus operation, and the rest is versa.
The explanation are all over the place.
thank you sir
This guy is rushing through the material like a maniac; beginner tutorial my ass
Any English version of this tutorial please?
Just at the right time
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!!
Thank you
What's the extensions that enables you to autocomplete the code and also tells you the argument types??
you can use sublime text editor.
Nice tutorial.
Redux was hard to understand until I saw this video.
Thanks, Man.
thaat whaat i waant thank you
great job, the Thunk pattern part was rushed but still thanks!
thank you
I’ll have to come back to this. I just hope it’s not using typescript
Hi, i got this error while trying to checkout from the StartingApp
error: pathspec 'StartingApp' did not match any file(s) known to git
sorry, when the cart is empty. when you want to re-login a foreach error appears
why is that?
How can Fix it?
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 :( 😢😭😞
Thanks for this great tutorial. I am only about to start learning redux but it says createStore is deprecated. How do I pass through this hassle. I have tried using import {legacy_createStore as createStore) from "redux" but the import method is not working.
Anyone with solution can help. Thanks in advance.
I'm going through the official redux docs now because of this issue :/
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
Nice
@@shivani9840 i haven't started with reactjs but it's great to see good videos to follow up
I guess you need to make another video now. createstore is welcomed with a strikethrough in VS Code. It is just when I finally started to learn redux
To able to work
import {legacy_createStore as createStore) from "redux"
because createStore is deprecated , hope it helps
@@realkevinbrian Yeah I know. VS code mentions this. Though, I am going with toolkit because even the documentation says so. Pretty easy stuff actually.
@@piyushaggarwal5207 Are you perchance referring to the official docs?
@@aldolhitlercondensation1363 Yeah official react docs asks us to setup using redux toolkit. It was updated recently
Where is the address of the github repository for this course?
Thanks freecodecamp for such a simple to understand redux video. I've watched so many videos, read docs but couldn't understand anything. With your video i implemented redux in my react without any problem.🙏👌👍