如何在 React 中进行状态管理?使用 Zustand!

目录

计数器

import { create } from 'zustand'

const useStore = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
}))

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

function Counter() {
  const count = useStore(state => state.count)
  return <h1>{count}</h1>  
}

用法

创建状态 state 操作 action

Basic typescript usage doesn’t require anything special except for writing create<State>()(...) instead of create(...)

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

const useFishStore = create((set) => ({
  salmon: 1,
  tuna: 2,
  deleteEverything: () => set({}, true), // clears the entire store, actions included
  deleteTuna: () => set((state) => omit(state, ['tuna']), true),
}))

const useSoundStore = create((set, get) => ({
  sound: "grunt",
  action: () => {
    const sound = get().sound  // you still have access to state outside of it through get
    // ...
  }
})

export default useBearStore

在 react 之外使用呢?

import { createStore } from 'zustand/vanilla'

const store = createStore(() => ({ ... }))
const { getState, setState, subscribe } = store

export default store

import { useStore } from 'zustand'
import { vanillaStore } from './vanillaStore'

const useBoundStore = (selector) => useStore(vanillaStore, selector)

获取状态

// It will cause the component to update on every state change!
const state = useBearStore()

// It detects changes with strict-equality (old === new) by default, this is efficient for atomic state picks.
const bears = useBearStore((state) => state.bears)

// Object pick, re-renders the component when either state.nuts or state.honey change
const { nuts, honey } = useBearStore(
  (state) => ({ nuts: state.nuts, honey: state.honey }),
  shallow
)

// Array pick, re-renders the component when either state.nuts or state.honey change
const [nuts, honey] = useBearStore(
  (state) => [state.nuts, state.honey],
  shallow
)

// Mapped picks, re-renders the component when state.treats changes in order, count or keys
const treats = useBearStore((state) => Object.keys(state.treats), shallow)

// You may provide any custom equality function
const treats = useBearStore(
  (state) => state.treats,
  (oldTreats, newTreats) => compare(oldTreats, newTreats)
)
const increase = useBearStore((state) => state.increase)

在组件之外如何使用?

const useDogStore = create(() => ({ paw: true, snout: true, fur: true }))

// Getting non-reactive fresh state
const paw = useDogStore.getState().paw
// Listening to all changes, fires synchronously on every change
const unsub1 = useDogStore.subscribe(console.log)
// Updating state, will trigger listeners
useDogStore.setState({ paw: false })
// Unsubscribe listeners
unsub1()

// You can of course use the hook as you always would
const Component = () => {
  const paw = useDogStore((state) => state.paw)
  ...

参考文章

Zustand

https://github.com/pmndrs/zustand

标签 :
comments powered by Disqus

相关文章

如何自己本地编译 OpenWrt ?

感觉不如直接下载,然后用转换工具把 img 搞成 vmfs,见linux - VMware安装OpenWrt,工具下载链接https://www.starwindsoftware.com/tmplink/starwindconverter.exe。 关于系统 LEAN 的不行,还是 ImmortalWrt 更好!还可直接下载 vmfs,注意系统日志等级它默认的 debug 可不行。 关于上网控制插件,注意会和广告过滤 ACC 加速等冲突,有舍有得啊,openwrt上网时间控制为什么设置后无效-OPENWRT专版-恩山无线论坛 (right.com.cn)。 老老实实用 clash for windows 了,OpenWrt 很不稳定啊,github 时好时坏。

阅读更多
搭建起本地的 DevOps 环境

动机 ¶ 自己作为独立开发者,也想体验那种写完代码效果就出来的感觉,不用又当个运维人员。 想当初 Spring Boot 程序,得手动编译,然后手动复制到目标机器,然后重启服务,可麻烦了。 因此,本地跑一套 DevOps 或者 GitOps 的系统应该会很有趣。

阅读更多
我的博客构建方法及历史

简介 ¶ 回想自己的博客系统,是从什么时候开始建立的呢? 我翻阅了域名购买记录、服务器购买记录、GitHub 仓库等。 最早在 2019年3月 购买了 dfface.com 的域名,但我怀疑最早的网站不在那个时候,应该还要更早,更早的那一波可能采用了 GitHub Pages。

阅读更多