How to save multiple data in localStorage with zustand?

When using the Zustand state management library, persisting state to localStorage is a common requirement, especially when multiple data items need to be stored. I will explain how to achieve this step by step, providing a concrete implementation example.

Step 1: Create the Zustand State Store

First, we need to create a Zustand state store. Suppose we want to store user information and theme preferences:

javascript
import create from 'zustand';

const useStore = create(set => ({
  userInfo: { name: 'John Doe', email: 'john@example.com' },
  theme: 'dark',
  setUserInfo: (userInfo) => set({ userInfo }),
  setTheme: (theme) => set({ theme })
}));

Step 2: Implement State Persistence

To save the state to localStorage, we can leverage Zustand's middleware. Zustand provides a middleware called persist that automatically stores the state in localStorage.

First, you need to install the Zustand persistence middleware:

bash
npm install zustand@next

Then, modify our state store to use the persist middleware:

javascript
import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist((set) => ({
  userInfo: { name: 'John Doe', email: 'john@example.com' },
  theme: 'dark',
  setUserInfo: (userInfo) => set({ userInfo }),
  setTheme: (theme) => set({ theme })
}), {
  name: 'user-settings', // Key name in localStorage
  getStorage: () => localStorage // Specify using localStorage
}));

Step 3: Use the Zustand State

You can use this state in your React components, for example, to update and read:

javascript
import React from 'react';
import useStore from './store';

function App() {
  const { userInfo, theme, setUserInfo, setTheme } = useStore();

  return (
    <div>
      <h1>User Info</h1>
      <p>Name: {userInfo.name}</p>
      <p>Email: {userInfo.email}</p>
      <button onClick={() => setUserInfo({ name: 'Jane Doe', email: 'jane@example.com' })}>
        Update User Info
      </button>

      <h1>Theme</h1>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme('light')}>
        Change Theme
      </button>
    </div>
  );
}

export default App;

Summary

By using Zustand's persist middleware, we can easily persist multiple data items. This approach is both concise and efficient, making it ideal for managing state across sessions in modern React applications.