Why I Moved from React Redux to Zustand and Why You Should Too!

Подписаться 105 тыс.

Просмотров 109 тыс.

50% 1

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

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 182

@harag9 7 месяцев назад

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.

@alroyfernandes4090 Год назад

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

@venicebeachsurfer 2 года назад

I agree, Zustand is awesome. The same creator also created Valtio and Jotai, two other great libraries for state.

@abc_cba 2 года назад

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 🇮🇳

@MuhammadFahreza Год назад

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 !

@kamalkamals Год назад

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

@HeyDan1983 2 года назад

An Svelte-like store management, that's something we needed on React, thank you for the video.

@muneugi3900 Год назад

How do you go about authorization in a login using zustand?

@hussainabbas1341 Год назад

Amazing, Thank you so much for clear this topic to us, your explanation is well prepared good job.

@michaelangelomagat7824 Год назад

wow it blows my mind... I should try this zustand to my next project thank you for this video ❤

@gindrunk 10 месяцев назад

I just did this to my personal projects 2 months ago and im loving zustand!

@MuhammadFahreza Год назад

how to implement it with react query?

@TannerBarcelos Год назад

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.

@lord-of-the-shinobi-world Год назад

So, what you're saying is, Redux is the basic. From there, move forward with other state management libraries

@TannerBarcelos Год назад

@@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.

@mateh3273 Год назад

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?

@juanmamenendez Год назад

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.

@user-ve5tt2bz3d Год назад

How about RTK Query? It is much less code than in redux and maybe like in zustand.

@codeWimran Год назад

Please can you give us a link to this ecommerce repository?

@yahyasalimi3254 2 года назад

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

@theblackunderflow1842 2 года назад

same

@RyanKOnk 2 года назад

Same

@zm12123 2 года назад

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

@aacv 2 года назад

you do not need to learn zustand if you know redux. you know how to run, then of course you know how to walk.

@rachidb9624 Год назад

You need 5 minutes to learn it

@eleah2665 Год назад

I just noticed this. Is the code available somewhere? Thanks.

@DevX_0o0 9 месяцев назад

Isn’t ContextAPI + hooks that enough?

@mukhammadsobirov1311 2 года назад

Absolutely loved the video! Can you please share the source code of the video demo projects if they'republic repos?

@rubenverster250 2 года назад

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

@nakshatrasingh6933 Год назад

Heyy, great tutorial, can you share the code for the zustand implementation? Thanks

@sokacsavok 2 года назад

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.

@edwardroh89 Год назад

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

@hussainabbas1341 Год назад

I agree, but still Zustand is much simpler

@rohithn-76 4 месяца назад

Zustand simple to implement reduced broiler plate code

@Rei-m3g 2 года назад

I see something like tis and blood boils . it takes time to lean framework and something comes along and says everyone should jump in.

@yawkissi2058 5 часов назад

I think easy-peasy is a better redux implementation in terms of developer experience, Redux toolkit still has boiler plate. But Zustand seems quite simple since there is no context wrapper, similar to Pinia in vue. Great video

@MikhailTatsky 2 года назад

I moved to MobX in 2019 and pretty happy.

@pranupranav6279 Год назад

Awesome I use zustand in my project.

@ahmedhassan_saver 2 года назад

Can i use the 2 of them in the same proj?

@CoderOne 2 года назад

Sure, but I don't think it would be a good idea!

@phryneas Год назад

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.

@jomariiringan8724 2 года назад

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

@antoniopantano4255 2 года назад

Context is not meant to be a state management API

@ikarosouza 2 года назад

Redux is already a hell by its own, then you add saga to it and your mind explodes.

@chess4964 2 года назад

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

@devillspdr 2 года назад

redux toolkit has rtk query, and all works seamlessly together. and redux dev tools is awesome

@chess4964 2 года назад

@@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".

@devillspdr 2 года назад

@@chess4964I find redux toolkit very simple to use and I'm new to react

@trideepsardar2266 2 года назад

I also like mobx for state management,

@shawnxiong2011 2 года назад

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.

@blasttrash Год назад

just curious what advanced use cases does redux have that cannot be done in zustand?

@thomasweigert731 Год назад

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

@CoderOne Год назад

Nice explanation! Now, I'm officially German ^^

@MattBakken10 8 месяцев назад

You don't need to do ...state inside slices. You can just modify state directly in RTK.

@user-mo2po5xo4c 5 месяцев назад

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)

@TomsVeidemanis 2 года назад

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

@okonkwo.ify18 2 года назад

React redux is now easy with when you use it with @redux-toolkit

@ronin9432 2 года назад

"Zustand"is the German word for "State" (if you want to know the pronunciation ;-) -then this is what you need to look for)

@minciNashu 2 года назад

"Zoo stand". Lol

@baseljuma158 2 года назад

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

@ibrahimhafez7750 2 года назад

Redux toolkit is hard?

@RyanKOnk 2 года назад

@@ibrahimhafez7750 not it's not unless you find learning a few concepts hard

@baseljuma158 2 года назад

@@ibrahimhafez7750 I can agree it is not that much hard with toolkit but still need so many things to do

@akovalevv 2 года назад

@@ibrahimhafez7750 some people start study react without understand base js and logic.

@dendysaptoadi9652 2 года назад

Thats true, Zustand easy to use

@butbutmybutt 11 месяцев назад

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.

@archmad 2 года назад

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

@jggabayno 2 года назад

Zustand is cool, but RTK have full support to nextjs that's why im still using it with typescript :)

@bilalullahkhan5517 Год назад

i have moved to zustand for about 3 months, and believe me, it is really great and amazing library, i prefer zustand over redux

@neil_from_future 2 года назад

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.

@anazi 6 месяцев назад

Zustand is the best honestly ! I couldnt find an issue with it. Even in production Apps.

@optix212 Год назад

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.

@Nick-tv5pu Год назад

Oh boy yet another state management library... just what we needed

@l3vi965 2 года назад

its not sustend, its ZUSTAND like tsu stand but stand is prounced german

@rahuldotel5983 2 года назад

Redux vs react context , redux vs recoil , redux vs zustand - redux always winner

@arazmammadov9276 2 года назад

Can you explain it in more details please? What makes Redux to be always winner?

@rahuldotel5983 2 года назад

@@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 ..

@rubenverster250 2 года назад

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

@DuyTran-ss4lu 2 года назад

Awesome

@dronie1600 4 месяца назад

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

@ilyasayusuf5447 Год назад

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.

@bigruan123 2 года назад

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.

@rehan-6377 10 месяцев назад

Thanks

@viallymboma9874 2 года назад

new favorite in town

@preslavgetov1330 Год назад

Hey people, anyone ever wrote async thunks with firebase methods?

@rubelhossain_webdeveloper 2 года назад

thanks

@dontqsy5101 2 года назад

I prefer Jotai insted Zustand but both are great

@MyPhuckDub Год назад

To know, zustand is pronounced"tsooshtand" and means "state" in german. pmndrs is short for poimandres.

@antoniopantano4255 2 года назад

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.

@nizomsidiq3 2 года назад

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

@softwaveindia Год назад

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

@chrissiefernando4218 Год назад

Also most people fail to cancel the pending api’s if they navigate from one page to other.

@AsifSaifuddinAuvipy 2 года назад

redux-query? MST?

@adimardev1550 Год назад

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.

@dealloc 2 года назад

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.

@dealloc 2 года назад

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.

@saeedatenzi Год назад

Jack of all trades, master of none

@ionutsandu5913 6 месяцев назад

@@saeedatenzi But still better than mastering one. You clearly didn't understand the saying.

@asadali1268 2 года назад

I want to make my own state management librarie. Any js developer want to join.

@charuwaka1 4 месяца назад

Zustand + React Query = Awesome

@inqvisitor3722 2 года назад

mobx with react-query for cache is better and simpler.

@clipesdaora 2 года назад

you are using the redux toolkit wrong.

@Randomguy48279xyz 2 года назад

👍

@Nochdarus 2 года назад

"Zustand" is a German word for state, and is pronounced /ˈt͡suːˌʃtant/

@butykar Год назад

"Süßtend" would be written in german, what CoderOne says. :) but the english version isn't bad, just sounds funny. Good video btw!

@timschulz_de 7 месяцев назад

I case you didn't know: "Zustand" is actually the translation of "state" in German. So the name makes a lot of sens :D

@yathink2406 2 года назад

I think you probably look into svelte.

@jptraderr 2 года назад

ok which company is going to higher me for using zustand right now ....

@rubenverster250 2 года назад

exactly :)

@isaidwithcheese8926 2 года назад

Zero companies

@kenjimiwa3739 Год назад

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."

@simonpettersson6788 Год назад

If you're having to learn specific libraries to score jobs I'm afraid your problem is not knowing specific libraries my friend.

@juanrolon1729 Год назад

an elevator or forklift manufacturer company should higher you

@everythingisfine9988 2 года назад

Simple like Pinia 💪

@okonkwo.ify18 2 года назад

Hahaha. The context API and the useReducer hook is my favorite, but react redux comes second. No other API beats them

@EliasGuderian Год назад

By the way, for those that don't know Zustand is German for state.

@joelhager3106 2 года назад

Zustand is AMAZING

@MuhammadIqbal-fh8em Год назад

in!

@mlnima Год назад

is not Zustand its TsuShtand

@jpbz412b 2 года назад

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

@The_SSS 2 года назад

I don’t unZustand

@marlo3898 2 года назад

Fun fact Zustand means State in german

@nitsanbh Год назад

0:38 please zoom in, some of us watch on mobile :)

@xxXAsuraXxx 2 года назад

RTK is the future

@jayasurian123 Год назад

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?

@rameetmashta 2 года назад

I ain't moving from JavaScript

@adamtak3128 2 года назад

react-query + zustand

@0xedb 2 года назад

Then moved from zustand to Valtio, which is far simpler

@basefocus8969 4 месяца назад

I just have ptsd from redux!

@rahuldotel5983 Год назад

update ... zustand is really awesome

@yakmoon Год назад

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.

@pezhmanvapsin Год назад

not funny guys, I have a friend who talks like that, he is not doing it on purpose. this is the way they talk

@yakmoon Год назад

@@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.

@butterfly7562 2 года назад

and jotai

@bharatmishra250 2 года назад

Well Redux never die...

@adammo6661 2 года назад

It's pronounced more like tsu-shtand than zoostand

@tonytran07 Год назад

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.

@philbrk8750 Год назад

funfact: "Zustand" is german for "State" ...so you need to pronounce the "Z" with a bit more aggression :D

@codernerd7076 2 года назад

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.