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

作者站长头像
站长
· 阅读数 11

我们知道使用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更新到数据库中去。

回复
1个回答
avatar
test
2024-07-03
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;
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容