我是要介绍一个新的 react 全局共享状态管理器，它和 vue 组件的状态管理一起同工之妙。马上体验马上体验在 react 状态管理领域，react-redux 可谓是只手遮天了，基于 flux 思想实现，小巧，immutable 的思想让数据变化可控。但 immutable 所带来的编程代价太大了，如果你要更新一个深层结构的对象的某个节点，写作将会是极其麻烦的一件事，而且还保不准会出错。为了保证 immutable，redux 的 reducer 机制让开发者掉光了头发。于是有了类似 dva、rematch 等这样的项目，这些项目基于 redux 再做了一层封装，让开发者少写了很多 reducer 相关的代码，但是很无奈，immutable 的特性，让开发需要付出的精力来控制每一个更新。再另一个世界，mutable state 其实也非常优秀。知名的 mobx 推出了 mobx-react 和 react-redux 竞争。然而，原本非常优秀的 mobx 却只管把自己的想法强加于人，而忽视了代码写作的便捷性，总之，使用起来虽然不用再为 reducer 头疼，却对组件的侵入和让人很不适应。你需要了解它的概念，特别是基于观察者模式的很多概念，它提供的 api 的形式也很丰富，基于接口的、装饰器的，总之，你在掀开它的魔法盒子时，会忍不住“wo\cao/”，但当你真正在项目中尝试使用它时，确会不由但发出“wo^cao\”，但就在心智折腾上，就让人抓狂，还不知道会产生多少副作用 bug。在 mutable 数据管理最优秀的，莫过于 vue。无论初识还是长久，都会与 vue 的响应式数据相看两不厌。它简介的用法，以及把基本原理告诉你，让你尽情去修改数据。Mutable 相对于 immutable 的最大好处，就是可以对对象任意节点上的对象进行修改，而无需仔细的把握这个节点在整个 state 的什么位置上，在 redux 的实践中，你可能都已经厌烦了写 ... 来解构对象/数组了，但在 vue 中，根本不需要担心这一个点，直接逮住一个对象，立即修改它的某个属性，完事走人，不需要先构造出一个新的数据，不需要调用某个接口把这个新数据传入进去。虽然 redux 那种每一个状态都是全新的思想很好，但是，你的状态不可能是全新的，每一个被认为是全新的状态，都包含了老状态的一部分（对象节点），而这些引用，可能带来后续的错误。在 react 生态中，你可以使用 immutable.js 来尽可能避免这个问题。但是在 vue 生态中，用于管理全局状态的 vuex 确非得要引入 mutions, actions 的概念，这都是从 flux 借鉴过来的，而且很奇怪的是，在 mutions 中定义的修改，又要到 actions 中重做一遍。实在是有点自废武功啊。有没有一种方法，可以在 react 中真正享受 vue 式的数据管理？你不妨来试试下面的代码：
function MyComponent(props) {
const { one } = props
const { name, age, height, married, sex, changeSex, me, book, updateBook } = one
return (

<>

{!!me && (

<>

{me.user_name_zh}, {me.user_position}






)}

{name}: {age}, {height}, {married ? 'married,' : ''} {sex ? 'F' : 'M'}




book: {book.price || 0}











)
}

const mapToProps = (contexts) => {
const { one } = contexts
return {

one,
}
}

export default connect(mapToProps)(MyComponent)

function MyComponent(props) {
const { one } = props
const { name, age, height, married, sex, changeSex, me, book, updateBook } = one
return (

<>

{!!me && (

<>

{me.user_name_zh}, {me.user_position}






)}

{name}: {age}, {height}, {married ? 'married,' : ''} {sex ? 'F' : 'M'}




book: {book.price || 0}











)
}

const mapToProps = (contexts) => {
const { one } = contexts
return {

one,
}
}

export default connect(mapToProps)(MyComponent)
看这代码啊，和 react-redux 有点像，完全可以理解是不。在数据开始对组件进行注入的时候，保持和 react-redux 一致的使用效果，这实在是无缝的思想过渡，你觉得从原来写 react-redux 的代码到写这样的代码，会有压力吗？没有，一点都没有。下面来看看这种全局状态管理的真面目：
import React from 'react'
import { use, connect } from 'react-tyshemo'

class Book {}

use({
name: 'one',
state: {

name: 'one',

age: 10,

book: new Book(),
},
computed: {

height() {

return this.age * 5

},
},
watch: {

age({ value }) {

if (value > 22) {

this.married = true

}

},
},
methods: {

changeSex(sex) {

this.sex = sex

},

updateBook(data) {

Object.assign(this.book, data)

this.dispatch('book')

},
},
hooks: {

onUse() {

fetch('/api/me').then(res => res.json()).then((json) => {

const { data } = json

this.me = data

})

},
},
})


import React from 'react'
import { use, connect } from 'react-tyshemo'

class Book {}

use({
name: 'one',
state: {

name: 'one',

age: 10,

book: new Book(),
},
computed: {

height() {

return this.age * 5

},
},
watch: {

age({ value }) {

if (value > 22) {

this.married = true

}

},
},
methods: {

changeSex(sex) {

this.sex = sex

},

updateBook(data) {

Object.assign(this.book, data)

this.dispatch('book')

},
},
hooks: {

onUse() {

fetch('/api/me').then(res => res.json()).then((json) => {

const { data } = json

this.me = data

})

},
},
})

看完什么感受？“wo/cao/” 绝对是抄 vue！连属性名字都和 vue 组件一毛一样（多了一个 hooks）。用一个 use 函数注册一个 state 的 namespace，并且这这个注册定义对象中，传入 state, computed, methods, watch 等来实现状态数据的处理。由于对数据的操作和 vue 是一摸一样，所以，你不用担心 ajax 请求的异步问题了，不需要考虑一大堆 redux 带来的“解决问题带来的问题”。看上去是不是很舒服呢？我们来看下运行效果codesandboxcodesandboxreact-tyshemo 只提供几个函数接口，避免 mobx-react 那般复杂。另外，和其他所有 react 状态库提供 Provider 不同，react-tyshemo 直接 connect 就完事了，不需要 Provider。另外，在项目结构上，你可以在不同的文件中使用 use 相同的 def，这样，你就可以很清晰这个组件实际依赖的是哪一个 state namespace，并且可以通过 IDE 的定义链接，直接进入 def 文件查看 methods。这样也让一个组件，无论是自己局部的 state 还是依赖的全局的 state，都在一个文件中可以找到。react-tyshemo