Creating a Store | Zustand State Management Tutorial

Zustand: Creating a Store

Zustand is a small, fast, and scalable bearbones state-management solution using simplified flux principles. It’s known for its simplicity and minimal boilerplate. This guide will walk you through creating a Zustand store.

1. Installation

First, install Zustand using npm or yarn:


npm install zustand
# or
yarn add zustand

2. Basic Store Creation

The core of Zustand is the create function. Let's create a simple store to manage a counter:

import { create } from 'zustand';

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

export default useCounterStore;

Explanation:

create((set) => ({ ... })): This is the main function to create a Zustand store. It takes a function as an argument. This function receives a set function, which is used to update the state.
count: 0: This defines the initial state of the store. count is a state variable initialized to 0.
increment: () => set((state) => ({ count: state.count + 1 })): This defines an action (a function) that updates the state.
- set is the function provided by Zustand to update the state.
- set((state) => ({ count: state.count + 1 })) uses the functional update form of set. This is the recommended approach, especially when the new state depends on the previous state. It ensures you're working with the most up-to-date state.
decrement: () => set((state) => ({ count: state.count - 1 })): Similar to increment, but decrements the count.
reset: () => set({ count: 0 }): Resets the count to 0. This uses the object update form of set. It's suitable when the new state doesn't depend on the previous state.
export default useCounterStore: Exports the store so it can be used in your components. The naming convention use[StoreName]Store is common and helps with readability.

3. Using the Store in a Component

Now, let's use the store in a React component:

import React from 'react';
import useCounterStore from './store'; // Adjust path as needed

function Counter() {
  const { count, increment, decrement, reset } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;

Explanation:

const { count, increment, decrement, reset } = useCounterStore();: This is where the magic happens. useCounterStore() is a hook that returns the state and actions defined in the store. We destructure them to access them directly.
The component then renders the count and provides buttons to call the increment, decrement, and reset actions.

4. More Complex State

You can store more complex data structures in your Zustand store:

import { create } from 'zustand';

const useUserStore = create((set) => ({
  user: {
    name: 'John Doe',
    age: 30,
    isLoggedIn: false,
  },
  login: (name) => set({ user: { ...state.user, name: name, isLoggedIn: true } }),
  logout: () => set({ user: { ...state.user, isLoggedIn: false } }),
  updateAge: (newAge) => set((state) => ({ user: { ...state.user, age: newAge } })),
}));

export default useUserStore;

Key points:

The user state is an object.
The login and logout actions update the isLoggedIn property. Note the use of the spread operator (...state.user) to create a copy of the existing user object before modifying it. This is important to avoid directly mutating the state, which can lead to unexpected behavior.
updateAge uses the functional update form to safely update the age.

5. Middlewares (Advanced)

Zustand supports middlewares for logging, persistence, and other advanced features. This is beyond the scope of a basic "creating a store" guide, but it's worth knowing about. See the Zustand documentation for more details: https://zustand.dev/

Summary

Zustand provides a simple and effective way to manage state in your React applications. Its minimal API and functional update approach make it easy to learn and use, while still providing the power and flexibility you need for complex applications. Remember to always update state immutably (using the spread operator or functional updates) to avoid unexpected side effects.