How to use StoreApi in zustand

Using StoreApi in Zustand primarily involves several key steps: creating a store, accessing and updating state, and using selectors and subscriptions to optimize performance and component responsiveness. Below, I will walk through how to implement these features in a React project step by step.

Step 1: Creating the Store

First, use the create method to set up a Zustand store. This step is typically performed in a separate file to allow reuse across the entire application.

javascript
import create from 'zustand'

const useStore = create(set => ({
  fishes: 0,
  addFish: () => set(state => ({ fishes: state.fishes + 1 }))
}));

In this example, we create a simple store containing a state named fishes and a method to modify this state, addFish.

Step 2: Accessing and Updating State

Within components, you can use the created useStore hook to access and update state.

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

function Component() {
  const fishes = useStore(state => state.fishes);
  const addFish = useStore(state => state.addFish);

  return (
    <div>
      <p>Fishes: {fishes}</p>
      <button onClick={addFish}>Add a fish</button>
    </div>
  );
}

In this component, we access the fishes state and the addFish method using useStore, and update the state when the user clicks the button.

Step 3: Using Selectors and Subscriptions

To optimize performance, we can use selectors to avoid unnecessary re-renders. When the state changes, components using this state will only re-render if the specific part returned by the selector has changed.

javascript
const fishes = useStore(state => state.fishes);

Additionally, if you need to execute extra logic when the state changes, you can use subscriptions.

javascript
useStore.subscribe(console.log, state => state.fishes);

This code logs the new state whenever fishes changes.

Conclusion

By following these steps, you can effectively use Zustand's StoreApi to manage state in a React project. Using Zustand simplifies and enhances state management, especially in large applications, helping developers maintain and scale state management more efficiently.