Managing global state in React applications is essential as projects scale. While Redux has long been the go-to, modern developers are leaning toward simpler alternatives like Zustand.

In this post, let’s compare Redux and Zustand using a practical example: a simple counter app.

⚛️ What is Redux?

Redux is a predictable state container that uses a centralized store, actions, and reducers to manage application state. With the introduction of Redux Toolkit, a lot of the boilerplate has been reduced.

🐻 What is Zustand?

Zustand (German for "state") is a minimal, hook-based state management library for React. It’s created by the team behind Jotai and Recoil and is praised for being lightweight and incredibly simple to use.

🧪 Scenario: A Simple Counter App

We’ll create the same app using both libraries:

• A counter that displays a number
• A button to increment the count

🧰 Redux (with Redux Toolkit)

🔌 Install Redux Toolkit and React Redux

npm install @reduxjs/toolkit react-redux

🗂️ store.js

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

⚛️ App.js

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { store, increment } from './store';

function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+1</button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

🐻 Zustand Example

🔌 Install Zustand

npm install zustand

🗂️ store.js

import { create } from 'zustand';

export const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

⚛️ App.js

import React from 'react';
import { useCounterStore } from './store';

function App() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+1</button>
    </div>
  );
}

export default App;

⚖️ Redux vs Zustand – Summary Table

🚀 Final Thoughts

• Use Redux if your app has complex business logic, needs middleware, or requires detailed debugging tools.
• Use Zustand for smaller projects, prototyping, or when you want less boilerplate and maximum simplicity.

Both are amazing tools — choose what fits your project's size and team structure best.

📺 Want a visual explanation? Watch the upcoming **YouTube Video on Mohit Decodes

Got stuck? Want to showcase your version? Drop a link or comment below.
📲 Follow me on Instagram or WhatsApp for daily frontend tips.