简介

简介

如何使用 Zustand

Zustand 是一个小巧、快速且可扩展的基础状态管理解决方案，拥有基于 hooks 的舒适 API。它不是模板化或有主观偏见的，但有足够的约定来明确且类似于 Flux。

你可以在这里试用一个现场演示。

安装

Zustand 作为一个包可以在 NPM 上使用：

# NPM
npm install zustand
# 或者，使用你选择的任何包管理器。

首先创建一个 store

你的 store 是一个 hook！你可以将任何内容放入其中：原始值、对象、函数。set 函数会合并状态。

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

然后绑定你的组件，就是这样

你可以在任何地方使用这个 hook，无需 providers。选择你的状态，当该状态变化时，使用该状态的组件将重新渲染。

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}