切片模式

¥Slices Pattern

将存储切成更小的存储

¥Slicing the store into smaller stores

随着你添加更多功能，你的存储会变得越来越大，维护起来也越来越困难。

¥Your store can become bigger and bigger and tougher to maintain as you add more features.

你可以将主存储划分为较小的单个存储以实现模块化。这在 Zusand 中很容易实现！

¥You can divide your main store into smaller individual stores to achieve modularity. This is simple to accomplish in Zustand!

第一个单独的存储：

¥The first individual store:

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

另一个单独的存储:

¥Another individual store:

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

你现在可以将两个存储合并为一个有界存储：

¥You can now combine both the stores into one bounded store:

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

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

在 React 中的用法组件

¥Usage in a React component

jsx

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

更新多个存储

¥Updating multiple stores

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

¥You can update multiple stores, at the same time, in a single function.

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

将所有存储组合在一起与之前相同。

¥Combining all the stores together is the same as before.

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),
}))

添加中间件

¥Adding middlewares

将中间件添加到组合存储与其他普通存储相同。

¥Adding middlewares to a combined store is the same as with other normal stores.

将 persist 中间件添加到我们的 useBoundStore：

¥Adding persist middleware to our useBoundStore:

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' },
  ),
)

请记住，你只应在组合存储中应用中间件。将它们应用于单个切片内可能会导致意外问题。

¥Please keep in mind you should only apply middlewares in the combined store. Applying them inside individual slices can lead to unexpected issues.

与 TypeScript 一起使用

¥Usage with TypeScript

可以在此处中找到有关如何在 Zustand 中使用 TypeScript 的切片模式的详细指南。

¥A detailed guide on how to use the slice pattern in Zustand with TypeScript can be found here.

切片模式 ​

将存储切成更小的存储 ​

在 React 中的用法组件 ​

更新多个存储 ​