How to access Zustand store outside a functional component?

In React projects, Zustand is a highly flexible state management library that enables easy access and modification of state outside components. Below are the steps and examples for accessing the Zustand store outside functional components:

Step 1: Create a Zustand Store

First, create a Zustand store. This store defines your application's state and functions to manipulate it.

javascript
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 })),
}));

In this example, we define a simple counter store with count state and two methods increase and decrease for state modification.

Step 2: Access Zustand Store Outside Components

You can directly import and use useStore from the Zustand store outside React components. This is particularly useful in event handlers, asynchronous operations, or other logic not directly tied to UI components.

javascript
// Import the store
import { useStore } from './store';

// Access state
const count = useStore(state => state.count);

// Modify state
const increaseCount = () => {
  useStore.getState().increase();
}

// Alternatively, set state directly
const setCountDirectly = (newCount) => {
  useStore.setState({ count: newCount });
}

Example: Using in Event Handlers

Suppose you have a regular JavaScript function that needs to update state when a user performs an action, such as a timer or network request callback:

javascript
function onUserDidSomething() {
  // Directly call the store's method to increment the count
  increaseCount();
}

// Or set state after an asynchronous operation
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  setCountDirectly(data.newCount);
}

Summary

With Zustand, you can flexibly manage and access state outside React components, making it a popular choice for modern React applications. By decoupling state management logic from components, you can write and maintain clearer, more maintainable code.