Zustand vs Redux Toolkit: A Detailed Comparison

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// Usage
function Counter() {
  const count = useStore((s) => s.count);
  const increment = useStore((s) => s.increment);
  return <button onClick={increment}>{count}</button>;
}

import { createSlice, configureStore } from "@reduxjs/toolkit";
import { Provider, useSelector, useDispatch } from "react-redux";

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

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

// Usage (needs Provider wrapper)
function Counter() {
  const count = useSelector((s) => s.counter.count);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(counterSlice.actions.increment())}>{count}</button>;
}

const useStore = create((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch("/api/users").then(r => r.json());
    set({ users, loading: false });
  },
}));

const fetchUsers = createAsyncThunk("users/fetch", async () => {
  return await fetch("/api/users").then(r => r.json());
});

const usersSlice = createSlice({
  name: "users",
  initialState: { users: [], loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.users = action.payload;
        state.loading = false;
      });
  },
});

// Zustand middleware
import { devtools, persist } from "zustand/middleware";

const useStore = create(
  devtools(
    persist(
      (set) => ({ count: 0, increment: () => set(s => ({ count: s.count + 1 })) }),
      { name: "counter-store" }
    )
  )
);