Redux 替代品 Zustand

还在学 Redux？不妨提前学下它以后的替代品！——Zustand（zustand 就是 react 的 pinia）。

Zustand 是由 Jotai 和 React springs 的开发人员构建的快速且可扩展的状态管理解决方案, Zustand 以简单被大家所知, 它使用 hooks 来管理状态。

快速开始

安装依赖

npm install zustand # or yarn add zustand

通过 create 函数创建 store，回调可拿到 get set 就类似 Redux 的 getState 与 setState，可以获取 store 瞬时值与修改 store。返回一个 hook 可以在 React 组件中访问 store。

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

Zustand 和 Redux 一样，都是将状态保存在一个对象里，当然你可以创建多个 store 来分离状态，但他们在逻辑上是分开的。（与之相对的是 recoil / jotai 的原子化状态管理工具）

社区主流方案是 react-redux，其本质上基于 React 的 Context 特性实现，如果应用足够简单，实际上用 Context 手写一个简单的状态管理工具倒也并不难。不过，考虑到工具的完善性、项目的健壮性，通常采用较好的、成熟的社区方案。在移动端场景下，react-redux 略显臃肿，轻量级状态管理工具 zustand 倒是一个不错的替代方案。