Why I Moved from React Redux to Zustand and Why You Should Too!
Вставка
- Опубліковано 27 тра 2024
- So if you have been using Redux for many years now and you always felt that there is something off with the boilerplate code that you need to deal with as a Redux developer every time you need to add a new state variable or simply add an action to the reducer. Well, in this video we are going to cover why Redux is quite boring and hard and why maybe we should move to something easier and simpler like Zustand.
⭐ Timestamps ⭐
00:00 Intro
00:34 What is Zustand?
01:43 Zustand is better than Redux?
06:09 Creating a store using Zustand/Redux
10:33 Ecommerce Web App we are going to use
11:34 Redux-Toolkit Implementation
14:11 Zustand Implementation
17:48 Comparing it with Redux Core
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
Being new to react, I spent about a week learning redux, then I watched a video about Zustand, but they was no comparison, then I found this. WOW thanks for doing this, really detailed and I'm surprised how much easier it was to follow your zustand code compared to redux. Thanks for the video.
I agree, Zustand is awesome. The same creator also created Valtio and Jotai, two other great libraries for state.
Great library, I do agree with everyone else that companies won't hire a just a zustand user. But that won't stop me from using it in my personal projects. You earned a new subscriber
I really appreciate how you give us many options and tech updates. Thank You.
Can you do a comparison of performance of Redux vs other state management tools side-by-side? It would be awesome to watch.
Best wishes all the way from India 🇮🇳
I find redux toolkit very easy though.
I will keep an eye on Zustand, right now as a beginner I would not waste my time jumping between libraries and frameworks. Maybe in the future when Zustand gets more popular and companies start recognizing it, I will consider learning it
same
Same
I love redux toolkit, i barely write any boilerplate anymore! I copy/paste basic structures and fill in a few details to get everything running smoothly
you do not need to learn zustand if you know redux. you know how to run, then of course you know how to walk.
You need 5 minutes to learn it
Hi ! nice video. I was wondering on 17:35. We have fetchProducts inside useEffect ?. How will we comply to React 18 that encourage us to move away data fetching inside useEffect ? thanks !
I use redux at work and past projects. Great stuff but I’m ready to learn something new. Using it at work will keep me fresh but I think I’m gonna start using React Query and Zustand here on out for all my personal projects and use Redux Toolkit at work / RTK Query.
If you’re a beginner, learn Redux. It’s the standard and it’ll get you a job. If you’re in industry or want to learn something way easier and that’s cleaner and less overhead to add new skills to your toolbox and make side projects, learn Zustand.
It’s important to note everyone has opinions. Always let your job do the talking at first but outside of work, use what you want. In the end, so long as the USER can use the app and experience a seamless experience, that’s all that matters. The code can always be changed later.
So, what you're saying is, Redux is the basic. From there, move forward with other state management libraries
@@lord-of-the-shinobi-world redux is probably the most complex and feature rich but other state managers are probably better in 2023. React Query and Zustand are nice. But it’s also probable for many users that a global state manager isn’t even needed. Especially with the rise of server first web apps and nextjs, so much of your “state” can be server side and no longer require client side state. If you need it, reaching for something like Zustand or RQ are fine.
I just did this to my personal projects 2 months ago and im loving zustand!
An Svelte-like store management, that's something we needed on React, thank you for the video.
A great tip is to create custom hooks that access and return to the corresponding store state and actions and then just call the custom hooks in the Components and never directly call the store.
wow it blows my mind... I should try this zustand to my next project thank you for this video ❤
Amazing, Thank you so much for clear this topic to us, your explanation is well prepared good job.
Listen man...
If the project I've been onboarded to uses easy-peasy, I use easy-peasy...
If the project I've been onboarded to uses contect, I use context...
If the project I've been onboarded to uses RTK, I use RTK...
You see what I'm getting at?
If the project is fresh, use RTK. Redux is standard in the industry and RTK makes it very easy. Even Backend guys can work it :)
I moved to MobX in 2019 and pretty happy.
If you actually look at the two examples, it makes Redux look way more complicated. When, in reality it is basically the same thing and you can nearly make it as compact as the Zustand example. The Redux part also has types (interfaces), which the Zustand example omits. There is nothing in those examples about importing, exporting which you would have to do with Zustand as well if you want to use from multiple files. I also don't like when people create too many stores. I like to just create a tree of states, but only use one main store, it makes everything cleaner are much more simple. So yeah, not quite fair comparison.
agreed, the example comparison is a bit unfair tbh. You can simplify it a lot. There is just not that much more compared to zustand. The advantage of redux is its maturity and popularity and that's a huge huge benefit when you consider how much more support you will get when searching
I agree, but still Zustand is much simpler
Zustand simple to implement reduced broiler plate code
And after x days move from zustand to another package, so my question is on react why not to make creation state/store simple like svelte or solidjs??
Awesome I use zustand in my project.
Zustand is my first love coz it supports async calls just using async/await with no further config needed not like redux that you need thunk for that, but as software engineers we dont use what is easy, we use what brings us a job. Nevertheless, zustand is great for your personal projects
redux toolkit has rtk query, and all works seamlessly together. and redux dev tools is awesome
@@devillspdr dude that's the point... zustand dont need those shits to work. That's why others love zustand. But those simple state management is not industry's favorite hence the sentence "we dont use what is easy but what gives us a job".
@@chess4964I find redux toolkit very simple to use and I'm new to react
Absolutely loved the video! Can you please share the source code of the video demo projects if they'republic repos?
How do you go about authorization in a login using zustand?
Heyy, great tutorial, can you share the code for the zustand implementation? Thanks
My question would be, there's also a library such as react-query or apollo-graphql. Therefore, what's the point of adding the data to the store such as redux or zustand, could u please provide me another usecase rather than fetching data?
just a hint to demystify the name: Zustand, der (male genus) means state in German, pronounce it like 'super' beginning with a T and like 'stunt' with sh instead of just an s. Tsuuu-sh-tund if that makes sense
How about RTK Query? It is much less code than in redux and maybe like in zustand.
12:30 actually, Redux-Thunk is part of Redux Toolkit per default. There is no reason to write extra code here to override the default middleware (which includes thunk) with thunk.
I also like mobx for state management,
I love, how you pronounce Zustand xD Its German and means nothing more than "State". If you wanna try: you pronounce it like "Tsu" - like in tsunami for the ZU, "sh" just for the S (dont ask why xD) , the AN is pronounced like the un in bun :Dand the D ist not like a D, more like a T ....like Tsushtunt or in german Zustand :)
Nice explanation! Now, I'm officially German ^^
Isn’t ContextAPI + hooks that enough?
Redux is already a hell by its own, then you add saga to it and your mind explodes.
how to implement it with react query?
Zustand is the best honestly ! I couldnt find an issue with it. Even in production Apps.
With RTK Query everything becomes more equal, since now we don't have so much boilerplate code and thinking in redux is a whole another thing now (working with async actions, i mean)
I just noticed this. Is the code available somewhere? Thanks.
I'd say a bit too biased towards zustand :) yes it's simple.. but you don't need all the async thunks in redux -> use the builtin rtk query and you are golden
React redux is now easy with when you use it with @redux-toolkit
Please can you give us a link to this ecommerce repository?
i have moved to zustand for about 3 months,
and believe me, it is really great and amazing library, i prefer zustand over redux
"Zustand"is the German word for "State" (if you want to know the pronunciation ;-) -then this is what you need to look for)
"Zoo stand". Lol
You don't need to do ...state inside slices. You can just modify state directly in RTK.
Personallly, for normal state management, I felt Redux and Redux Toolkit APi could be simpler, as author pointed out, too much just too much boiler template (reminds me Angular).
Surely, when building large project or complex store interraction or dependency, you need the library to have the flexibility for advanced use cases.
just curious what advanced use cases does redux have that cannot be done in zustand?
Looks promising but would it be better for beginners to use Context instead of zustand? Looking forward for companies that allows to use this tho & insight from other devs. Right now, I'm still going to use redux
Context is not meant to be a state management API
Oh boy yet another state management library... just what we needed
Zustand + React Query = Awesome
Thanks
Redux events inform all stores. If u have many places inside ur app where u update ur cart u can always add functionality to ur stores later. U dont have to update ur components.
When I start using React I found that Redux is so complicated and I still find it hard even with redux toolkit ... It seems that Zustand might be the new tool that I will use for state management. It seems easy to use and has less code to write, Thank you for the video but I think it is a little bit long
Redux toolkit is hard?
@@ibrahimhafez7750 not it's not unless you find learning a few concepts hard
@@ibrahimhafez7750 I can agree it is not that much hard with toolkit but still need so many things to do
@@ibrahimhafez7750 some people start study react without understand base js and logic.
Thats true, Zustand easy to use
RTK Toolkit and Zustand isn't really comparable. RTK Toolkit is a collection of tools that provides you tight integration with everything from state management, async queries and mutations with caching and prefetching, API definitions (RTK Query), side-effects and more.
Zustand is just state management with some side-effect handling. The rest relies on React hooks like useEffect, which makes it easy to end up shooting yourself in the foot-esp. for async operations.
Now this is not to say that Zustand isn't great. It certainly is a nice API for smaller apps and scales fine, and I personally use it for most of my projects. But if you need to integrate anything with Zustand, like React Query, to handle async queries and mutations, you end up writing needing to write and maintain your own glue code. And that is without TypeScript and type inference. It becomes more boilerplate than RTK for a lot of things.
Zustand is great for state management, RTK is great if you like to have more out of the box that is tightly integrated and need good interop with TypeScript for those things.
Additionally the example in this video is a poor representation of RTK at best. It mostly uses Redux and not any of the toolkit APIs that offer much simpler ways to manage state, async side-effects and API requests. RTK Query would have been a much better fit and provides everything you need to cache, invalidate and implement optimistic updates for a smoother UX.
Jack of all trades, master of none
@@saeedatenzi But still better than mastering one. You clearly didn't understand the saying.
for data state management, you better off using react-query
for simple ui state management, you better off using react-tracked
there's no place in using redux at all
Redux vs react context , redux vs recoil , redux vs zustand - redux always winner
Can you explain it in more details please? What makes Redux to be always winner?
@@arazmammadov9276 redux is always structured even if your project size is large , it is easy to test , almost half of the react apps use redux , huge ecosystem , sate are read only no unnecessary render ..
@@arazmammadov9276 Redux is the standard in the industry :)
Rather take a bit more time laying a big foundation so that you can scale up to a big skyscraper
RTK is like cheatcodes for new devs :D
Zustand is cool, but RTK have full support to nextjs that's why im still using it with typescript :)
well, in the concept of a beginner I would learn redux toolkit because my team company uses it. Zustand seem more light bright for my other hand project.
Awesome
new favorite in town
thanks
I case you didn't know: "Zustand" is actually the translation of "state" in German. So the name makes a lot of sens :D
I prefer Jotai insted Zustand but both are great
I see something like tis and blood boils . it takes time to lean framework and something comes along and says everyone should jump in.
Can i use the 2 of them in the same proj?
Sure, but I don't think it would be a good idea!
Simple like Pinia 💪
You showed redux in TS, but then zustand in JS. I normally love your videos but please try to keep the language consistent. Of course Redux in TS is going to have more boiler plate.
Would anyone consider reapex?
It’s built with redux, and has almost all the advantages of redux toolkit, zustand, jotai, etc. Even a lot simpler than redux toolkit. Since it’s built with redux, it compatible with redux ecosystem.
Zustand is AMAZING
👍
By the way, for those that don't know Zustand is German for state.
"Zustand" is a German word for state, and is pronounced /ˈt͡suːˌʃtant/
"Süßtend" would be written in german, what CoderOne says. :) but the english version isn't bad, just sounds funny. Good video btw!
To know, zustand is pronounced"tsooshtand" and means "state" in german.
pmndrs is short for poimandres.
ok which company is going to higher me for using zustand right now ....
exactly :)
Zero companies
you should be able to pick it up quickly. besides, I can't think of any company that says "oh, you haven't used Zustand before? sorry we can't hire you."
If you're having to learn specific libraries to score jobs I'm afraid your problem is not knowing specific libraries my friend.
an elevator or forklift manufacturer company should higher you
i hate redux even before i started learning it. even after i became good at it, it's just still not the right way to manage state. i switch to zustand 1 year ago and it was the end of state management war. but i'm forcing my selft to keep redux on my back just because it's on the job while zustand is new. but as for my projects, i use zustand with react-query togather works perfectly for many scenarios.
I think you probably look into svelte.
Hahaha. The context API and the useReducer hook is my favorite, but react redux comes second. No other API beats them
mobx with react-query for cache is better and simpler.
in!
Hey people, anyone ever wrote async thunks with firebase methods?
i absolutely love redux, but in some project that i work before. they used to many redux, like a lot lot of redux even for small thing that you can do in useState.
because of this the app feel so laggy and bloated.
Promises are always composed of three states. Pending, Rejected, Fulfilled. I still see people omitting the first two all the time and this is really a bad practice. In your example you are not handling at all things like loading, error, error message and so on (you just set loading: false but i don't see where you set it to true). There's no guarantee you api call will always return a valid result. You say nothing about memoization. Redux/Toolkit ships with createSelector to avoid unnecessary computation when part of the state is not changed. Is that supported in Zustand out of the box?. How can one avoid heavy computation and avoid re-rendering the component even if the state has not changed. Comparison are not only about shorten code. Please provide more info about other important features if you want to make a valid comparison.
yeah memoization is supported out of the box and by default it is using strict equal (===) comparison,
we can also change the comparator, for example we can add shallow comparator (can import from zustand/middleare) to return an object or array in selector
@CoderOne has not managed loading and rejected but it does not seem that difficult ,
to achieve that all he has to do is wrap the api call in a try catch block
For error state in catch block he can set error,
For loading state before the api call he has to set loading to true (in try block)
Also most people fail to cancel the pending api’s if they navigate from one page to other.
and jotai
RTK is the future
its not sustend, its ZUSTAND like tsu stand but stand is prounced german
I want to make my own state management librarie. Any js developer want to join.
Redux thunks are just functions that return functions. You don't need to use createAsyncThunk and all that crap. And redux toolkit already have thunks built in you don't need to configure the Middleware again. Actually you just removed all rtk Middlewares and replaced with only redux thunk. At real world projects redux wins by defining a clearer pattern to develop the project. But, zustand is crazy simple I'll give it a chance
update ... zustand is really awesome
react-query + zustand
redux-query? MST?
0:38 please zoom in, some of us watch on mobile :)
Fun fact Zustand means State in german
I don’t unZustand
I just have ptsd from redux!
Fun Fact, I am from Germany and "Zustand" is actual German and literally means "State", LOL =D
Well Redux never die...
Then moved from zustand to Valtio, which is far simpler
you are using the redux toolkit wrong.
No one is saying redux is difficult.
But I will say it is messy as hell. I complained about this since I first saw a sample code of it. It's stupid.
All of your code that you're using Redux on???? I can cut that entire code by over 50%. Less code to maintain, easier to read, and superior by far in every way. Want middleware? Zustand got it for you too.
Name me one thing Redux has over Zustand
The only one people provided me so far is: "It's been around longer, familiarity where more people recognize it, and time-travel debugging"
Honestly... I'll gladly give up those to cut off 50% of my code and keeping the entire project clean.
Those who get really annoyed by his voice and how he talks, turn on the cc & mute the video. unfortunately that's the only way. and Yes! I know!, my ear also bleeds when I listen to him talking.
not funny guys, I have a friend who talks like that, he is not doing it on purpose. this is the way they talk
@@pezhmanvapsin I don't believe you. I tried talking like him, I started talking to my parents the way talks, and they thought I was stupid, and trying to mock them.
Redux got mayor history and proven record its easy to test and works! Its not really that much of extra code... tired hearing that over and over.
It's stable and works... and Zustand is well a new player that didn't earn my trust yet to use it for anything other than personal projects.
Every promotor of any library forget to tell something. How to write tests?! For me thats the pain point for choosing any library. How easily I could implement tests! Why we omit testing part when we talk about this is good and that is not??!! Are we not writing tests anymore?
I ain't moving from JavaScript
The right pronunciation for the word "Zustand" for English speakers is: tsu-sh-tand
First time when I saw Redux i was like "bruv...wtf is this crap?" I said "jesus so complex and difficult tool for a begginner". Redux has so much boilerplate code thats totally useless and not really needed for the goal of state managment, redux is too complex(also not needed), the structure of redux is also so confusing. When I needed a state managment for my first time in my entire life i was like "im not gonna use redux, this is another crap used in this industry that shouldnt even exist" then i looked up some state managment tools and saw zustand and i felt in love with this tool. I am not an Redux hater or sum, but i just hate tools in this industry like php etc that shouldnt exist a long time ago, same for jqueary etc, i cant wait when redux will die, zustand is doing so well in large apps and its scaling pretty well if u know what ure doing i feel pain in my ass tho cause im looking for a job atm as a front and i know that i will have to use redux on the front end if im gonna be hired anywhere, and im about to cry about this fact cause redux shouldnt exist anymore. I love the way of Zustand, its like hook based, pretty lovely, simple, really powerful, pretty readable when u see the code etc, not confusing at all just clearly lovely tool that makes ur work easier and comfortable as heck ;p
The major problem is that most of companies require you to have high level knowledge of redux.
Yeah good luck with production application build bud, share with us later how easy was your scaling and how it managed to highly perform in rush hour ;)
If you want to be professional react developer you should master redux, redux’s ecosystem and context API.
The main reason redux won’t be replaced soon in the professional industry is because it is battle tested and from my own experience have the right tools to handle a massive state handling and manipulation when your client never close the browser and accumulate massive data over time.
@@ahmedn76841 I don't say that the industry don't requires the knowledge of redux.
funfact: "Zustand" is german for "State" ...so you need to pronounce the "Z" with a bit more aggression :D
is not Zustand its TsuShtand
For server state React Query is the king. For client state Redux, Zustand..