切片模式

将 store 切分为更小的 store

随着功能的增加，你的 store 会变得越来越大，也越来越难以维护。

你可以把主 store 拆分成更小的独立 store，以此实现模块化。在 Zustand 中，这做起来非常简单！

第一个独立 store：

export const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

另一个独立 store：

export const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})

现在你可以把这两个 store 合并成一个绑定后的 store：

import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'

export const useBoundStore = create((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}))

在 React 组件中的用法

import { useBoundStore } from './stores/useBoundStore'

function App() {
  const bears = useBoundStore((state) => state.bears)
  const fishes = useBoundStore((state) => state.fishes)
  const addBear = useBoundStore((state) => state.addBear)
  return (
    <div>
      <h2>Number of bears: {bears}</h2>
      <h2>Number of fishes: {fishes}</h2>
      <button onClick={() => addBear()}>Add a bear</button>
    </div>
  )
}

export default App

更新多个 store

你可以在单个函数中同时更新多个 store。

export const createBearFishSlice = (set, get) => ({
  addBearAndFish: () => {
    get().addBear()
    get().addFish()
  },
})

把所有 store 组合在一起的方式与之前相同。

import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'
import { createBearFishSlice } from './createBearFishSlice'

export const useBoundStore = create((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
  ...createBearFishSlice(...a),
}))

添加中间件

为组合后的 store 添加中间件，与其他普通 store 的做法相同。

为我们的 useBoundStore 添加 persist 中间件：

import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'
import { persist } from 'zustand/middleware'

export const useBoundStore = create(
  persist(
    (...a) => ({
      ...createBearSlice(...a),
      ...createFishSlice(...a),
    }),
    { name: 'bound-store' },
  ),
)

请记住，你只应在组合后的 store 中应用中间件。在单个切片内部应用中间件可能会导致意外问题。

在 TypeScript 中使用

关于如何在 Zustand 中配合 TypeScript 使用切片模式的详细指南，见此处。

切片模式#

#将 store 切分为更小的 store

#在 React 组件中的用法

#更新多个 store