Its Zustand Vs Redux!

Figure 1 : Redux Vs Zustand

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 add an action to the reducer. In this article, I will explain why Redux is dull and hard and why we should move to something easier and simpler like Zustand. We will see the differences between zustand and react and why you should perhaps move from the react-redux and redux toolkit into the pretty simple library called zustand.

Zustand and Redux are both libraries that can be used to manage the state in a JavaScript application.

Zustand is a lightweight library that offers a simple, intuitive API for managing state. It is designed to be easy to use and easy to learn, making it a good choice for developers who are new to state management. It allows you to manage the state of your React components in a centralized and easy-to-use way, using a global store to hold the states of your application. This can help make your app more predictable and easier to debug, as the states of your components are managed in a single location rather than being spread throughout your codebase.

Redux, on the other hand, is a more feature-rich library that offers a more powerful, flexible approach to state management. It is often used in larger, more complex applications and requires a bit more setup and learning to use effectively. It is often used with libraries like React to build user interfaces, but it can also be used in other contexts.

Figure 2: Redux initialization.

The above figure is the sample code using the redux toolkit because it more simple compare to redux. we have to initialize the reducer or it's called slice and it's basically called the store. It's a store that holds the state and allows you to change the state or update the states and the component listing for the states will update or re-render.

Figure 3: Redux initialization.

Now you can use useSelector and then useDispatch well you need to import your actions increment and decrement and you call the dispatch and pass it in increment. This makes syntax and API a little bit more complicated as it provides a lot of like flexibility and you can do so much stuff with it because it's fast and everything I completely agree with it but I'm not really a fan of doing this. It's a bit like struggling to create all of those just to do small tiny stuff and it's too much boilerplate code.

Redux is based on the idea of a “store” that holds the state of an application, and “actions” that can be dispatched to the store to update its state. The store is a single, immutable object that represents the entire state of the application, and actions are simply objects that describe a change to the state. Redux uses a reducer function to process actions and update the state of the store. The state of the store can then be accessed by components in the application, which can use to render themselves.

Figure 4: Zustand Initialization.

When it comes to zustand just look at the above figure and you will see the beauty of the zustand. we have a zustand store and reducer all you need to do to import create from zustand and it gonna give you the callback that has a set function. the set is basically just to update any kind of variable inside of the store. you have the initial state and its default value and have the action that is increasePopulation and removeAllBrears and those actions are going to call the set and you can update whatever you want that's it. It’s pretty simple no more boilerplate code. the useStore going to return a hook that you can use inside your components.

Figure 5: Zustand Initialization.

Now you can do useStore and can access whatever state you want or you may gonna wish to access your actions the same way and the state will increase. It's simple and does not need to wrap your component through like a provider and then pass in the store and know when it's gonna re-render and you worry about all those kinds of like putting that nested stuff any of that none of these. It just hooks and it makes the thing look a lot simpler and the code is so much easier to read as compared to redux.

Both Zustand and Redux can be used to manage state in a JavaScript application, and which one is the best choice will depend on your specific needs and requirements. If you are just starting out with state management or working on a small, simple application, Zustand may be a good choice. If you are working on a larger, more complex application, Redux may be a better option.

Why you should move from React Redux to Zustand?

There are a few reasons why someone might consider moving from Redux to Zustand for managing state in a React app. Here are a few potential advantages of Zustand:

1. Simplicity: Zustand is a very lightweight library, with a simple API and minimal boilerplate code. This can make it easier to learn and use, especially for smaller projects or teams.
2. Performance: Zustand uses a reactive approach to updating the UI, which can result in better performance compared to Redux, especially in cases where the state updates frequently.
3. Ease of testing: Zustand’s simpler API and lack of dependencies can make it easier to test state management logic.
4. Conciseness: Because it is a smaller library, using Zustand can result in less boilerplate code in your application.

Of course, Redux is still a trendy and widely-used library, and it may be a better fit for some projects depending on the specific requirements and constraints. It’s important to carefully consider the trade-offs and choose the state management solution that works best for your project. Ultimately, the decision of which state management library to use will depend on the needs of your specific application.