Integrating asynchronous actions such as API calls into your Zustand store allows you to manage loading, success, and error states alongside your main application state. In Zustand, you typically handle async logic directly inside store actions. This means you can fetch data, update state when the data arrives, and handle any errors, all within your store definition. By keeping async logic in your store, you ensure that components remain simple, only subscribing to the state they care about, while the store manages all the details of when and how that state changes.

To manage async logic, you define an action in your store that is an async function. Inside this function, you can set a loading state, perform the async operation (like fetching data from an API), update the state with the result, and handle errors. Zustand’s set function can be called at any point inside your async action to update state.

Suppose you want to fetch a list of users from a remote API and display them in your app. You might want to track whether the data is loading, store the results, and capture any errors. Here is how you could organize this logic in your Zustand store:

import { create } from "zustand";

const useUserStore = create((set) => ({
  users: [],
  loading: false,
  error: null,
  fetchUsers: async () => {
    set({ loading: true, error: null });
    try {
      const response = await fetch("https://api.example.com/users");
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await response.json();
      set({ users: data, loading: false });
    } catch (err) {
      set({ error: err.message, loading: false });
    }
  }
}));

In this example, the fetchUsers action is an async function. It sets loading to true and clears any previous errors before starting the fetch. If the fetch succeeds, it updates the users array and sets loading to false. If there is an error, it sets the error message and also sets loading to false. This pattern ensures that your UI can respond to all stages of the async process by subscribing to loading, users, and error in the store.