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 倒是一个不错的替代方案。
评论