Managing State in JavaScript: Zustand vs Redux

Welcome dear reader, today we compare two popular libraries for managing state in JavaScript applications: Zustand and Redux. When your app grows beyond a few components, passing data around through props becomes painful — a state manager gives every component access to a single, shared store. Let’s see how the two contenders differ and which one fits your project.

At re:Software S.L., we create innovative solutions for businesses that aim to digitize their processes and routines, managing the state of applications is an important part of making your app smooth and modern.

Table of contents

• What is State Management and Why Do You Need It?
• How Does Redux Work?
• How Does Zustand Work?
• Which One Should You Choose?
• Conclusion

What is State Management and Why Do You Need It?

State is the data your application remembers between interactions: the logged-in user, items in a shopping cart, filter selections. For simple cases, a component’s local state is enough. But when many components need the same data — and keep it in sync — you want a single source of truth outside your component tree.

That is what state management libraries provide: one store, predictable updates, and tools to debug changes over time. Redux has been the industry standard for years; Zustand is a modern, lightweight challenger.

Both the Redux and Zustand libraries may be integrated with modern frontend frameworks, for example it may be added to the components we discussed in the article about the Vue.js Composition API and the Options API.

How Does Redux Work?

Redux follows a strict pattern called unidirectional data flow. You define one central store, and the only way to change it is by dispatching an action that is processed by a reducer — a pure function that receives the current state and returns the next state.

// The reducer: how state changes
function cartReducer(state = { items: [] }, action) {
    switch (action.type) {
        // Add an item to the cart
        case "cart/add":
            return { ...state, items: [...state.items, action.payload] };
        default:
            return state;
    }
}

// Dispatch an action from any component
store.dispatch({ type: "cart/add", payload: { id: 1, name: "Coffee" } });

Modern Redux (the Redux Toolkit) removes much of the boilerplate the library was famous for, but the explicit action/reducer pattern remains — which some teams love for its traceability.

How Does Zustand Work?

Zustand takes the opposite approach: almost no ceremony. You create a store in a few lines, and components subscribe to exactly the pieces of state they need:

import { create } from "zustand";

// Create the store with its state and actions
const useCartStore = create((set) => ({
    items: [],
    // Define actions right next to the state
    addItem: (item) =>
        set((state) => ({ items: [...state.items, item] })),
}));

// Use it in a component, like a hook
const items = useCartStore((state) => state.items);

No actions, no reducers, no context providers wrapping your app. The set function updates state, and your component re-renders only when its selected slice changes.

Which One Should You Choose?

Pick Redux when your project is large, has many developers, or benefits from its strict conventions — the devtools time-travel debugging and middleware ecosystem are unmatched. Pick Zustand when you want the smallest possible setup, work with React hooks, or ship smaller bundles: it weighs about 1 kB.

As with our comparison of the two Vue component styles, neither is wrong — choose by team size and project complexity.

Conclusion

That’s already it for our Zustand vs Redux comparison. Redux brings structure and best-in-class tooling; Zustand brings simplicity and speed. Both will keep your app state predictable. Leave a comment below with the store you picked for your project, and why!