我是要介紹一個新的 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 && (
    <>
     <span>{me.user_name_zh},{me.user_position}</span>
     <br />
    </>
   )}
   <span>{name}: {age},{height},{married ? 'married,' : ''} {sex ? 'F' : 'M'}</span>
   <br />
   <span>book: {book.price || 0}</span>
   <br />
   <button type="button" onClick={() => one.age ++}>grow</button>
   <button type="button" onClick={() => changeSex(!sex)}>change</button>
   <button type="button" onClick={() => updateBook({ price: (Math.random() * 100).toFixed(2) })}>update</button>
  </>
 )
}

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
   })
  },})

看完什麼感受？“wo/cao/” 絕對是抄 vue！連屬性名字都和 vue 元件一毛一樣（多了一個 hooks）。用一個 use 函式註冊一個 state 的 namespace，並且這這個註冊定義物件中，傳入 state,computed,methods,watch 等來實現狀態資料的處理。由於對資料的操作和 vue 是一摸一樣，所以，你不用擔心 ajax 請求的非同步問題了，不需要考慮一大堆 redux 帶來的“解決問題帶來的問題”。

看上去是不是很舒服呢？我們來看下執行效果

codesandbox

react-tyshemo 只提供幾個函式介面，避免 mobx-react 那般複雜。另外，和其他所有 react 狀態庫提供 Provider 不同，react-tyshemo 直接 connect 就完事了，不需要 Provider。另外，在專案結構上，你可以在不同的檔案中使用 use 相同的 def，這樣，你就可以很清晰這個元件實際依賴的是哪一個 state namespace，並且可以通過 IDE 的定義連結，直接進入 def 檔案檢視 methods。這樣也讓一個元件，無論是自己區域性的 state 還是依賴的全域性的 state，都在一個檔案中可以找到。

到此這篇關於在react中使用vue的狀態管理的方法示例的文章就介紹到這了,更多相關react使用vue狀態管理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！