Adding persist middleware to zustand store

Zustand is a simple, lightweight state management library that makes managing state in React applications exceptionally easy. To use persistent middleware in Zustand, we first need to install the zustand/middleware extension.

Installing Zustand

If you haven't installed Zustand yet, you can install it with the following command:

bash
npm install zustand

Using Persistent Middleware

To achieve state persistence, we can use the persist middleware, which helps store the state in localStorage or sessionStorage. Below is a step-by-step guide on how to use the persist middleware:

1. Import Required Modules

   First, import the create method and the persist middleware:

   javascript
   

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

shell

2. **Create a Persistent Store**

   Use the `create` method to create a store and wrap its configuration with `persist`. Here, specify `name` as the key name for storage in `localStorage`, and `storage` as the storage medium (default is `localStorage`):

   ```javascript
const useStore = create(persist(
  (set) => ({
    fish: 0,
    addFish: () => set(state => ({ fish: state.fish + 1 }))
  }),
  {
    name: 'my-storage', // Must specify a unique name; this is the key name in localStorage
    storage: localStorage, // Can be sessionStorage or localStorage
  }
));

1. Use the Store in Components

   In React components, using this store is identical to using a standard Zustand store. State updates will automatically persist to the specified storage:

   javascript
   

function FishCounter() { const { fish, addFish } = useStore(); return (

); }

shell

### Important Notes

- Ensure the key name (`name`) provided with the `persist` middleware is unique across the entire application to avoid data conflicts.
- Using `sessionStorage` clears data when the browser session ends, while `localStorage` persists data until actively cleared.

With this approach, persisting Zustand state becomes straightforward, which is particularly valuable for applications needing to save user state or preferences.