react-vuex-hook

react-vuex-hook是利用React Hook配合Context和useReducer封装的一个用于小型模块的状态管理库，提供类似vuex的语法。

react-vuex-hook is a React Hook state manager realized by Context and useReducer, use like vuex.

稳定性

安装

npm install react-vuex-hook -S

使用

编写 store

1// store.js
2import initStore from 'react-vuex-hook'
3
4export const { connect, useStore } = initStore({
5  // 初始状态
6  initState: {
7    count: 0,
8  },
9  // 同步操作 必须返回state的拷贝值
10  mutations: {
11    // 浅拷贝state
12    add(state, payload) {
13      return Object.assign({}, state, { count: state.count + 1 })
14    },
15  },
16  // 异步操作，拥有dispatch的执行权
17  actions: {
18    async asyncAdd({ dispatch, state, getters }, payload) {
19      await wait(1000)
20      dispatch({ type: 'add' })
21      // 返回的值会被包裹的promise resolve
22      return true
23    },
24  },
25  // 计算属性 根据state里的值动态计算
26  // 在页面中根据state值的变化而动态变化
27  getters: {
28    countPlusOne(state) {
29      return state.count + 1
30    },
31  },
32})
33
34
35// 注意这里不要提前声明好配置对象然后传递给initStore
36// 否则由于ts的限制会失去类型推断

在页面引用

1// page.js
2import React, { useMemo } from 'react'
3import { Spin } from 'antd'
4import { connect, useStore } from './store.js'
5
6function Count() {
7  const { state, getters, dispatch } = useStore()
8  const { countPlusOne } = getters
9  const { loadingMap, count } = state
10  // loadingMap是内部提供的变量 会监听异步action的起始和结束
11  // 便于页面显示loading状态
12  // 需要传入对应action的key值
13  // 数组内可以写多项同时监听多个action
14  // 灵感来源于dva
15  const loading = loadingMap.any(['asyncAdd'])
16
17  // 同步的add
18  const add = () => dispatch({ type: 'add' })
19
20  // 异步的add
21  const asyncAdd = () => dispatch.action({ type: 'asyncAdd' })
22  return (
23    <Spin spinning={loading}>
24      <span>count is {count}</span>
25      <span>countPlusOne is {countPlusOne}</span>
26      <button onClick={add}>add</button>
27      <button onClick={asyncAdd}>async add</button>
28
29      {/** 性能优化的做法 * */}
30      {useMemo(
31        () => (
32          <span>只有count变化会重新渲染 {count}</span>
33        ),
34        [count]
35      )}
36    </Spin>
37  )
38}
39
40// 必须用connect包裹 内部会保证Context的Provider在包裹Count的外层
41export default connect(Count)

适用场景

比较适用于单个比较复杂的小模块，个人认为这也是 react 官方推荐 useReducer 和 context 配合使用的场景。 由于所有使用了 useContext 的组件都会在 state 发生变化的时候进行更新(context 的弊端)，推荐渲染复杂场景的时候配合 useMemo 来做性能优化。

为什么用它

1. 带给你Vuex类似的语法。
2. 完善的TypeScript类型推导。
3. 测试覆盖率100%

文档

https://sl1673495.github.io/react-vuex-hook/

更新 3.0

1. 全面使用TypeScript重构

2. 脚手架工具使用umi团队的father

3. 基于docz的文档

更新 2.0

1. 新增测试用例，测试覆盖率达到100%

2. mutation 的函数参数顺序和 Vuex 保持一致

1  mutations: {
2    // 浅拷贝state
3    add(state, payload) {
4      return Object.assign({}, state, { count: state.count + 1 })
5    },
6  },

3. actions 的函数参数和vuex保持一致

1  actions: {
2    async asyncAdd({ dispatch, state, getters }, payload) {
3      await wait(100)
4      dispatch({ type: 'add' })
5      // 返回的值会被包裹的promise resolve
6      return true
7    },
8  },