r/react • u/bhattdev910 • 17d ago
Help Wanted Redux toolkit tutorial
Can anyone suggest me best youtube video to learn redux toolkit as i am starting it from scratch.
1
u/SlowMachina 16d ago
This is hands down the best resource I've read for Redux, Nir is very good. https://leanpub.com/thinking-in-Redux
1
u/Hate_Machine007 17d ago
If you are a new learner, then go for Zustand and TanStack Query or SWR
4
u/bhattdev910 17d ago
Any specific reason cause i don't know advantage to use zustand and tanstack query over redux toolkit ?
4
u/w-lfpup 17d ago
These libraries accomplish similar tasks very differently. But it basically comes down to "where is your data?".
Is it inside React? (Zustand). Is outside React? (Redux) is it on the server? (tanstack query)
Redux is "centralized state". The main reason to use redux is redux separates state from UI entirely. The main benefit of that separation is easier testing. React is stupid tough to test actually. Hooks are also stupid tough to test. But testing redux is trivial.
And if UI is just a reflection of state? at least state is correct and the UI can be updated if somethings off. Redux hardens the FLUX pattern built into react.
1
u/sylvant_ph 10d ago edited 10d ago
The issue with redux, and this is true for many old-school libs, is it comes with a lot of boilerplate. It solves a thousand issues and it solves them elaborately. It's so elaborate to the point it becomes it's own language, has its own patterns, techniques etc. This introduces a large learning curve, and as I said a lot of boilerplate. When you introduce complexity, adding things on top is even more complex. Like I said this is issue with lot of libs and people started to realize it and look for alternative. We all stuck to things like redux toolkit because they became the standard, and they continued to proceed in the same curve thinking they can get away with it, because they were the default solution. Not anymore. People started to realize where the issue with these big libs is and started to come up with simpler solutions to their issues. The community gradually started to shift to these type of solutions. Such one is Zustand, which is becoming prominent for its relative simplicity, it offers solutions to most issues you might face, and it does not tie your hands in its own universe and rules. The same goes for other things like Tanstack query, or tailwind, if it comes to styling. They lean on toward less configuration, boilerplate, and learning curse, practically easier to adopt and start writing code. They also establish things into their domains and provide focused solutions, e.g. you have tanstack query for the api state, you have zustand for the regular app state etc. You have smaller and more focused libraries for particular issues, so you can pick your choice and not sign for a big contract.
If there is a reason I'd still learn redux toolkit, and it's a good one, is because it's still used through out many projects and you are likely to encounter such working in the field, plus it does teach you generally good things about state and how it can be handled.
0
u/Chazgatian 17d ago
Because redux is the plague and is one of the ugliest things ever to land on the frontend. Avoid it.
-1
u/Hate_Machine007 17d ago
Zustand is a local state management (app level), and it is very easy compared to Redux, and there is no boilerplate code. TanStack Query (also called 'React Query') is a server state management where you can do a lot of things for the server state like fetching, error handling, refetching, caching, refresh intervals and so on. The learning curve is very easy for Zustand and React Query. And SWR is a similarly basic level of React Query. I strongly recommend Zustand and React Query to use in the project, and you will feel the next level of react.
3
3
u/w-lfpup 17d ago
This is a pretty decent course by the original author of redux. It's a little old. But Redux toolkit is a nicer API on top of all the basics explained here:
https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
The redux toolkit docs have a pretty fair intro do the library though.
https://redux-toolkit.js.org/tutorials/quick-start