State management with Zustand

So far, Redux-Toolkit was the only state management I had used. At work, a senior colleague said that project used Zustand for global state management, so I came across Zustand. It was really simple, so I'm going to write down how to use it.

First, install zustand.

bash

1npm i zustand

Create the store.

Creating a store also seems much more concise than with Redux-Toolkit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { create } from "zustand"; // must be {create}; writing it as create causes an error

type countStoreType = {
  // If you use TS, you need to specify the type of useCountStore.
  count: number;
  countUp: () => void;
};

export const useCountStore = create<countStoreType>((set) => ({
  count: 0, // initial value
  countUp: () => {
    // countUp function
    set((state) => ({ ...state, count: state.count + 1 }));
  },
}));

Now any component can manage state with the count value and the countUp function.

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13import { useCountStore } from "./store/countStore";

function App() {
  const { count, countUp } = useCountStore(); // need to import the useCountStore declared above
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => countUp()}>+</button>
    </>
  );
}

export default App;

After using it, I found it really concise, so I could use it easily just by looking at an example.

State management with Zustand

More in Tech notes