Redux 替代品 Zustand
前端精髓
共 983字,需浏览 2分钟
· 2023-02-17
还在学 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 倒是一个不错的替代方案。
评论
rochefortKafka 替代品
rochefort是一个 Kafka 的替代品。实现数据推送,离线文件获取,没有任何心计(前提是你能接受数据丢失,并且你需要自己实现数据复制)。支持:append,get,multiget,close
rochefortKafka 替代品
0
MyCronCrontab 替代品
MyCron是Linux计划任务,Crontab的替代品。对Crontab的环境变量传递感到很无奈,于是自己写了一个替代品,当Crontab不能正确执行咱们的计划任务时,不妨试试这个!祝好!!====
MyCronCrontab 替代品
0
StulleMuleeMule替代品
StulleMule是德国的eMuleMod开发者Stulle的作品,是一个基于“忍者骡”MorphXT的二次Mod,此类Mod的共同特征是强大的资源发布能力,被广大资源发布者所喜爱。StulleMu
StulleMuleeMule替代品
0
emitter-kitNSNotificationCenter 替代品
emitter-kit是用Swift编写的NSNotificationCenter的替代品。
emitter-kitNSNotificationCenter 替代品
0
JDFCurrencyTextFieldUITextField 替代品
JDFCurrencyTextField是UITextField的嵌入式替代品,让用户能更好的输入货币值。JDFCurrencyTextField使得输入货币值更加容易,因为它在用户编辑单元格时将其文
JDFCurrencyTextFieldUITextField 替代品
0