大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
前言
提到 React 状态管理,我最初是接触的 Context,就是用 useContext 和 useReducer 去做状态管理,写多了发现还是挺麻烦的,还会出现 “Provider 嵌套地狱” 的问题,对于不同的 state 也不好组合计算。后面了解到 Redux,固有的模式使得用户需要编写很多重复和复杂的代码,甚至开发者也说了 “Try MobX”。对于 MobX,和前者的的函数式编程不同,它采用的是面向对象式的对状态进行管理,我本身并不是很习惯面向对象,这些状态管理库的心智负担,都太大了些。
现在我要推荐今天的主角——Valtio,这是我见过的使我的心智负担最低、需要编写的代码量最少的状态管理库,我本身也写 Vue3,我使用 Valtio 的感受就相当于,用了很久的 VueX,然后遇到了 Pinia!
Valtio 的优点:
概念简单,就是一个 proxy
文档友好,各种应用场景都有举例
使用方式和 API 简单,易于上手和使用,几乎没有什么心智负担...
有
devtools
api,完美支持 Debug当然,完全支持 TypeScript
使用体验下来,简直就是 React 版本的 Pinia 😍
下面,我将类比 Pinia,来讲讲如何使用 Valtio 和管理应用状态。
基本使用
首先使用 Vite 创建一个 React + TS 项目,这个不用讲了。不需要注册,不需要引入一个 Provider 或者 Root 什么根组件来包裹 App 组件,直接新建一个 store 文件夹,然后创建 modules 和 index.ts,如下所示:
store:整个应用的状态管理
modules:存放各个 store,proxy 是自由的,没有约束单一状态源
index.ts:导出 modules 中的各个store
// index.ts export * from './modules/counter'
// counter.ts import { proxy } from 'valtio' export const counterStore = proxy({ // state count: 0, // action increase: () => { counterStore.count++ }, // action decrease: () => { counterStore.count-- } })
上面的 count
就相当于一个 state,increase
和 decrease
就是 actions,负责对状态进行修改。使用起来也相当简单:
// components/CompA.index.tsx import { counterStore } from '~/store' import { useSnapshot } from 'valtio' export function CompA() { const { count, increase } = useSnapshot(counterStore) return ( <div> CompA <div>count: {count}</div> <button onClick={increase}>+</button> </div> ) }
这里使用了 useSnapshot
api,是为了保持 count
state 的响应式,这样 Valtio 就会自动追踪更新,然后触发组件的 re-render,当然,这是可选的。
如果你要避免组件的 re-render:
const { count } = counterStore
如果你仅仅需要 actions 来更新状态:
const { increase } = counterStore
actions 的更多写法
上面的示例中,我使用了合并 state 和 acions 的写法,Valtio 还支持更多写法,任君挑选。
单独分开写法
export const state = proxy({ count: 0, }) export const increase = () => { ++state.count } export const decrease = () => { --state.count }
方法合并式写法
export const state = proxy({ count: 0, }) export const actions = { increase: () => { ++state.count }, decrease: () => { --state.count }, }
this 写法
export const state = proxy({ count: 0, increase() { ++this.count }, decrease() { --this.count }, })
class 写法
class State { count = 0 increase() { ++this.count } decrease() { --this.count } } export const state = proxy(new State())
计算属性
在 Pinia 中,我们可以直接使用 computed
来基于一个 state 进行计算,结果依然是响应式的。在 Valtio 中,没有直接提供这类 api,但是我们可以使用 subscribeKey
和 subscribe
来订阅某个状态的更新,从而即时的计算属性。
import { proxy } from 'valtio' import { subscribeKey } from 'valtio/utils' const initialState = { count: 0 } export const counterStore = proxy({ count: initialState.count, // computed,需要手动订阅更新 double: initialState.count * 2, update: (value: number) => { counterStore.count = value } }) // 订阅更新 subscribeKey(counterStore, 'count', () => { counterStore.double = counterStore.count * 2 })
其中,subscribeKey
用于 primitive state(原始值类型),subscribe
用于引用类型(这里一般指 plain object)。
当然,你也可以不指定订阅某个状态,而直接使用 watch
api,Valtio 会自动追踪依赖值。
watch((get) => { get(counterStore) counterStore.double = counterStore.count * 2 })
状态组合
需求:在一个 store 中来使用另一个 store。
在 Valtio 中,状态组合也非常简单,直接引入使用即可,如果是在不同文件中的 store,则需要进行订阅更新。
我们新建一个 hello.ts:
// hello.ts import { counterStore } from './counter' import { watch } from 'valtio/utils' import { proxy } from 'valtio' const initGreet = 'hello counter' export const helloStore = proxy({ greets: Array.from({ length: counterStore.count }, () => initGreet), add: (value: string) => { helloStore.greets.push(value) } }) // 监听 counterStore 的更新 watch((get) => { get(counterStore) helloStore.greets = Array.from({ length: counterStore.count }, () => initGreet) })
功能:上面代码中,每次 count 更新的时候,greets 都会更新,计算关系为 greets 数组长度等于 count,每个元素都是 'hello counter'
。
greets.length === count
数据持久化
得益于 Valtio 的自由和简洁,你完全可以使用现有的 api 做到这点,基本思路是订阅某个你需要持久化的 state,然后检测到更新到时候,即时的存一下 Storage 即可,每次获取的时候就从 Storage 中获取。(仅需要两行代码)
Storage 可以是 localStorage 和 sessionStorage
示例代码:
import { proxy } from 'valtio' import { subscribeKey } from 'valtio/utils' const initialState = { count: 0 } export const counterStore = proxy({ // 取值的时候,本地存储有就从本地获取 count: Number(localStorage.getItem('count') ?? initialState.count), double: initialState.count * 2, update: (value: number) => { counterStore.count = value } }) subscribeKey(counterStore, 'count', () => { // 更新的时候,订阅更新一下本地存储 localStorage.setItem('count', counterStore.count.toString()) }) // 模拟计算属性 watch((get) => { get(counterStore) counterStore.double = counterStore.count * 2 })
历史记录
历史记录?没错,Valtio 还支持状态的回退和前进,因为 Valtio 保存了状态的每一个 snapshot(状态快照),我们可以使用 proxyWithHistory
来创建一个可保存历史状态记录的 proxy,该方法创建的 proxy 暴露了 undo
和 redo
方法能让我们对状态进行回退和复现,相当于 ctrl z 和 ctrl y。
import { proxyWithHistory } from 'valtio/utils' export const counerStore = proxyWithHistory({ count: 0, increase: () => { counerStore.value.count++ }, decrease: () => { counerStore.value.count-- } })
使用的时候主要这里需要使用 .value
来获取 state 和 actions。
// CompC/index.tsx import { useSnapshot } from 'valtio' import { counerStore } from '~/store/modules/counter2' export function CompC() { const counter = useSnapshot(counerStore) const { count, increase } = counter.value return ( <> <div>{count}</div> <button onClick={increase}>+</button> <br /> <button onClick={counter.undo}>undo</button> <button onClick={counter.redo}>redo</button> </> ) }
devtools debug
我们知道,pinia 支持使用 vue devtools 进行状态的追踪和 debug,那么我们的 Valtio 也支持 redux devtools。
下载好 redux devtools 插件后,在代码之加入下面这一行代码,即可轻松开启 debug:
devtools(counterStore, { name: 'state name', enabled: true })
一切都是那么的自然,几乎没有什么学习的负担,文档友好,api 简单,仅 3.1 kb 的库,赶快使用它来提升你的开发效率吧!(●'◡'●)
更多请参考官方文档:Valtio, makes proxy-state simple for React and Vanilla[1]
参考资料
[1]
https://valtio.pmnd.rs/docs/introduction/getting-started: https://link.juejin.cn/?target=https%3A%2F%2Fvaltio.pmnd.rs%2Fdocs%2Fintroduction%2Fgetting-started
作者:MurphyChen
https://juejin.cn/post/7225934630506643513
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下