zustand 如何结合远程API进行使用?
我们知道使用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个回答

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;
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容