reactでvueを使用した状態管理の方法例

4837 ワード

react vue 状態管理

私は新しいreactグローバル共有状態管理器を紹介したいです。それはvueコンポーネントの状態管理と一緒に仕事の妙です。
すぐ体験します
react状態管理の分野では、react-reduxは単に手で空を覆っていると言えます。flux思想に基づいて実現され、小さい、immuttableの思想はデータの変化を制御できます。しかし、immuttableがもたらしたプログラムの価格は大きすぎます。深層構造の対象となるノードを更新したいなら、文章を書くのは大変なことになります。間違いがあるかもしれません。immuttableを保証するために、reduxのreducer機構は開発者に髪の毛を全部なくしてしまいました。そこで、dvdやrematchなどのようなプロジェクトがありました。これらのプロジェクトはreduxに基づいてもう一回のパッケージを作って、開発者にreducer関連のコードを少なく書かせましたが、残念ながら、immuttableの特性は、開発により多くのエネルギーを必要として、更新をコントロールします。
もう一つの世界でも、mutble stateはとても優秀です。有名なmobxはmobx-reactとreact-reduxの競争を作り出しました。しかし、もともと優れたmobxは、自分の考えを人に押しつけるだけで、コード書きの便利さを無視していました。つまり、reducerのために頭を悩まなくても、コンポーネントへの侵入と適応が難しいということです。その概念を理解する必要があります。特に観察者モードの多くの概念に基づいて、アプリの形式も豊富です。インタフェースベースの飾り器です。つまり、魔法の箱を開けた時、「wo\cao/」を我慢できません。でも、実際にプロジェクトで試してみたら、「wo^cao」が出てきます。人を狂わせて、どれぐらいの副作用があるか分かりません。
mutbleのデータ管理において最も優れているのはvueに過ぎません。初見でも長くても、vueの応答式のデータと見合っています。その簡単な使い方と基本原理を教えてあげます。データを思いきり変えてください。Mutableがimmutableに対する最大の利点は、オブジェクトの任意のノード上のオブジェクトを修正することができます。このノードがstate全体のどの位置にあるかを注意深く把握する必要はありません。reduxの実践では、書き込みにうんざりしているかもしれません。すぐにその属性を修正して、仕事が終わったら、先に新しいデータを作る必要がなくて、あるインターフェイスを呼び出してこの新しいデータを入る必要がありません。reduxのようなすべての状態は全く新しい思想でいいですが、あなたの状態は全く新しいものではなく、それぞれが新しい状態と見なされ、古い状態の一部（対象ノード）が含まれています。これらの引用は、後続のエラーをもたらす可能性があります。react生態では、immuttable.jsを使ってできるだけこの問題を避けることができます。
しかし、vue生態の中で、全体の状態を管理するためのvuexは確かにmultions、actionsの概念を導入しなければならない。fluxから参考にしたもので、しかも不思議なことに、muntionsで定義された修正はまた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
   })
  },
 },
})

何を見ましたか？私/cao/"は絶対にコピーvueです！属性名までvueセットと同じです。一つのuse関数でstateのnamespaceを登録し、この登録定義対象には、state、computted、methods、watchなどが入ってきて、状態データの処理を実現します。データの操作はvueと同じですから、ajax要求の非同期問題を心配しなくてもいいです。大量のreduxによる「問題解決」を考える必要はありません。
気持ちいいですか？私たちは運行効果を見に来ました。
codesadbox
react-tyshemoは幾つかの関数インターフェースを提供し、mobx-reactのような複雑さを避ける。また、他のすべてのreact状態ライブラリがProviderを提供するのとは違って、react-tyshemoが直接connectで完結します。Providerは必要ありません。また、プロジェクト構造では、異なるファイルの中でuseと同じdefを使うことができます。このようにして、このコンポーネントが実際に依存しているのはどのstate namespaceかをよく知ることができます。IDEの定義リンクを通じて、直接defファイルに入ってmethodsを見ることができます。このように一つのコンポーネントをも譲って、自分の局部のstateかそれとも依存する全体の局面のstateかに関わらず、すべて1つのファイルの中で探し当てることができます。
以上、reactでvueを使った状態管理の方法例についての記事を紹介します。Vueを使った状態管理の内容については、以前の文章を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。

struts 2におけるアクションの名前の大きさについて

JSフォーム検証プラグインのデータと論理分離操作例分析【ポリシーモード】