堪称 React 版本的 Pinia，这才是你该选的 React 状态管理库！

作者：MurphyChen

https://juejin.cn/post/7225934630506643513

前言

提到 React 状态管理，最初是接触的 Context，就是用 useContext 和 useReducer 去做状态管理，写多了发现还是挺麻烦的，还会出现 “Provider 嵌套地狱” 的问题，对于不同的 state 也不好组合计算。后面了解到 Redux，固有的模式使得用户需要编写很多重复和复杂的代码，甚至开发者也说了 “Try MobX”。对于 MobX，和前者的的函数式编程不同，它采用的是面向对象式的对状态进行管理，我本身并不是很习惯面向对象，这些状态管理库的心智负担，都太大了些。

现在要推荐今天的主角——Valtio，这是我见过的使我的心智负担最低、需要编写的代码量最少的状态管理库，我本身也写 Vue3，我使用 Valtio 的感受就相当于，用了很久的 VueX，然后遇到了 Pinia！

Valtio 的优点：

1. 概念简单，就是一个 proxy
2. 文档友好，各种应用场景都有举例
3. 使用方式和 API 简单，易于上手和使用，几乎没有什么心智负担...
4. 有 devtools api，完美支持 Debug
5. 当然，完全支持 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 还支持更多写法，任君挑选。

1. 单独分开写法

   export const state = proxy({
      count: 0,
    })
   
    export const increase = () => {
      ++state.count
    }
   
    export const decrease = () => {
      --state.count
    }

1. 方法合并式写法

   export const state = proxy({
      count: 0,
    })
   
    export const actions = {
      increase: () => {
        ++state.count
      },
      decrease: () => {
        --state.count
      },
    }

1. this 写法

 export const state = proxy({
    count: 0,
    increase() {
      ++this.count
    },
    decrease() {
      --this.count
    },
  })

1. 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 的库，赶快使用它来提升你的开发效率吧！(●'◡'●)

更多请参考官方文档：https://valtio.pmnd.rs/docs/introduction/getting-started

推荐阅读  点击标题可跳转