zustand 如何结合远程API进行使用？

Question

我们知道使用zustand有persist 中间件，它可以结合远程API进行保存使用：

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

const API_URL = "https://example.com/api";

const useStore = persist(
  // your store definition here
  create((set) => ({
    count: 0,
    inc: () =>
      set(
        (state) => ({
          count: state.count + 1
        }),
        // 在更新状态后，将状态推送到远程 API
        () =>
          fetch(`${API_URL}/setState`, {
            method: "POST",
            body: JSON(this.getState())
          })
      )
  })),
  { name: "my-app-state" }
);

export default useStore;

想要问下，比如我们后端写的API，这些API有各条数据表的增删改查。

那么是否可以结合zustand的persist做到结合使用呢？比如我们变更了zustand store数据，那么就自动通过API更新到数据库中去。

Answer 1

import create from "zustand";

const API_URL = "https://example.com/api";

const useStore = create((set) => ({
  users: [],
  addUser: async (user) => {
    const response = await fetch(`${API_URL}/addUser`, {
      method: "POST",
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    });

    if (response.ok) {
      const newUser = await response.json();
      set((state) => ({ users: [...state.users, newUser] }));
    }
  }
}));

export default useStore;