Redux 替代品 Zustand

共 983字,需浏览 2分钟

 ·

2023-02-17 22:38


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


浏览 129
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报