Flux 启发的实践

¥Flux inspired practice

虽然 Zustand 是一个不有态度的库，但我们确实推荐了一些模式。这些灵感来自最初在 Flux 和最近的 Redux 中发现的实践，因此如果你来自其他库，你应该会感到宾至如归。

¥Although Zustand is an unopinionated library, we do recommend a few patterns. These are inspired by practices originally found in Flux, and more recently Redux, so if you are coming from another library, you should feel right at home.

但是，Zusand 在某些基本方面确实有所不同，因此某些术语可能与其他库不完全一致。

¥However, Zustand does differ in some fundamental ways, so some terminology may not perfectly align to other libraries.

推荐模式

¥Recommended patterns

单个存储

¥Single store

你的应用全局状态应位于单个 Zustand 存储中。

¥Your applications global state should be located in a single Zustand store.

如果你有一个大型应用，Zusand 支持 将存储拆分为切片。

¥If you have a large application, Zustand supports splitting the store into slices.

使用 set / setState 更新存储

¥Use set / setState to update the store

始终使用 set（或 setState）对存储执行更新。set（和 setState）确保所描述的更新正确合并，并适当地通知监听器。

¥Always use set (or setState) to perform updates to your store. set (and setState) ensures the described update is correctly merged and listeners are appropriately notified.

共置存储操作

¥Colocate store actions

在 Zustand 中，无需使用其他 Flux 库中的调度操作和 Reducer 即可更新状态。这些存储操作可以直接添加到存储中，如下所示。

¥In Zustand, state can be updated without the use of dispatched actions and reducers found in other Flux libraries. These store actions can be added directly to the store as shown below.

或者，通过使用 setState，它们可以是 位于存储外部

¥Optionally, by using setState they can be located external to the store

const useBoundStore = create((set) => ({
  storeSliceA: ...,
  storeSliceB: ...,
  storeSliceC: ...,
  updateX: () => set(...),
  updateY: () => set(...),
}))

类似 Redux 的模式

¥Redux-like patterns

如果你不能没有类似 Redux 的 Reducer，你可以在 store 的根级别定义一个 dispatch 函数：

¥If you can't live without Redux-like reducers, you can define a dispatch function on the root level of the store:

const types = { increase: 'INCREASE', decrease: 'DECREASE' }

const reducer = (state, { type, by = 1 }) => {
  switch (type) {
    case types.increase:
      return { grumpiness: state.grumpiness + by }
    case types.decrease:
      return { grumpiness: state.grumpiness - by }
  }
}

const useGrumpyStore = create((set) => ({
  grumpiness: 0,
  dispatch: (args) => set((state) => reducer(state, args)),
}))

const dispatch = useGrumpyStore((state) => state.dispatch)
dispatch({ type: types.increase, by: 2 })

你还可以使用我们的 redux-middleware。它连接你的主 reducer，设置初始状态，并向状态本身和原始 api 添加调度函数。

¥You could also use our redux-middleware. It wires up your main reducer, sets initial state, and adds a dispatch function to the state itself and the vanilla api.

import { redux } from 'zustand/middleware'

const useReduxStore = create(redux(reducer, initialState))

更新存储的另一种方法是通过封装状态函数的函数。这些还可以处理操作的副作用。例如，使用 HTTP 调用。要以非反应方式使用 Zustand，请参阅 自述文件。

¥Another way to update the store could be through functions wrapping the state functions. These could also handle side-effects of actions. For example, with HTTP-calls. To use Zustand in a non-reactive way, see the readme.