• shallow浅比较

import { shallow } from 'zustand/shallow'

const { todos, setFilter } = useStore(
  (state) => ({
    todos: state.todos,
    setFilter: state.setFilter,
  }),
  shallow,
)

或者：

const { todos, setFilter } = useStore(
  useShallow((state) => ({
    todos: state.todos,
    setFilter: state.setFilter,
  })),
)

• createSelectors来统一创建状态

const useStoreBase = create((set) => ({
  filter: "all",
  todos: [],
  setFilter(filter) {
    set({ filter });
  },
  setTodos(fn) {
    set((prev) => ({ todos: fn(prev.todos) }));
  },
}));

const useStore = createSelectors(useStoreBase);

// 获取属性
const todos = useStore.use.todos()

// 获取方法
const setTodos = useStore.use.setTodos()

• 异步获取数据

import { useEffect } from "react";
import { create } from "zustand";

const useStore = create((set) => ({
  todos: null,
  error: null,
  fetchData: async () => {
    try {
      const res = await fetch(`https://jsonplaceholder.typicode.com/todos`);
      const todos = await res.json();
      set({ todos });
    } catch (error) {
      set({ error });
    }
  },
}));

export default function App() {
  const { todos, fetchData, error } = useStore();

  useEffect(() => {
    fetchData();
  }, []);

  if (!todos) return <div>Loading...</div>;

  if (error) return <div>{error.message}</div>;

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

• 单一 Store：对于一个应用的全局数据应该放到一个单一的 Zustand Store 中。
• 使用set来管理状态