状態管理のRedux&React Redux

原文住所:
https://monster1935.com/2019/...
Reactテクノロジースタックのいくつかのテクノロジー案の「墓掘り」を行う過程で、なぜこのような案が必要なのか、どのような問題に遭遇し、この案を導入するとどのような収益をもたらすのかを体得した.いかなるテクノロジースキームの導入も、いくつかのテクノロジーシーンで発生する問題に対応している.
Vueの開発にはステータス管理スキームVuexが導入され、Vuexの導入はコンポーネント間の通信の複雑さを効果的に低減し、グローバルステータス管理の能力を提供し、中大規模なプラットフォームにとって、ステータス管理スキームの導入は必須である.
問題
いかなる技術案を議論するにも、出会った問題のシーンから着手しなければならない.Reduxの原作者であるDan AbramovはYou Might Not Need Redux文でこの思想を解釈し、Reduxを使わなければならないのではないか、そうではない.どのようなシーンで、どのような問題でこの技術案を引用することができるかは、いくつかの技術案の選択型の着地を考慮する際に考慮しなければならない問題である.
私たちはどんな問題に遭遇しましたか.
Redux中国語ドキュメント「動機」の章でまとめた.いくつかの問題があります.

における大規模な単一ページアプリケーションの開発では,アプリケーションの複雑さが増すにつれて,

の状態が増加する.

状態の変更シーンは、ユーザインタラクション、非同期要求、コンポーネント間の通信など、

を含むように増加する.

状態の変更は制御不能で、問題が発生したら調査しにくい

これらの問題をどのように解決するかには、統合されたソリューションが必要です.最も重要なのは、ステータスを制御し、管理しやすいことです.
明らかに、Reduxはこれらのことをしに来たのです.
Reduxの3つの原則から、Reduxは状態の制御可能で管理しやすいことがわかります.
一、単一データソース(store)
アプリケーション全体のstateは1つのstoreに格納され、管理が便利で、サービス側レンダリングに大きな利点があります(一般的に言われている同構造アプリケーションです).
二、state読み取り専用
stateは直接修正されず、dispatch actionで修正しなければなりません.1つのactionはjsオブジェクトであり、間もなく発生することと携帯するパラメータを記述します.この原則は状態の修正制御を保証している.
三、純関数(pure function)でstateを修正する
純粋な関数には特徴があり、全過程で副作用が発生せず、固定された入力は必ず固定された出力を生成する.これによりstate変更の追跡性が保証されます.
以上,reduxというライブラリのgithubでの紹介も理解した.
Predictable state container for JavaScript apps
(js応用のために生成された予測可能な状態容器)
Reduxは何をしましたか?

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

let store = createStore(todos, ['Use Redux'])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
});

store.subscribe(() => {
  // do your update
  console.log(store.getState())
})

以上のように、最も簡単なReduxの使用例である.主にこれらのことをしました.

グローバルstoreを作成します.reduxは単一のデータソースの考え方であることに注意してください.そのため、1つのアプリケーションで1つのstoreを使用すると

になります.

storeで取得stateはstore.getState()

を通過する.

stateを変更するにはdispatchを通じてactionを行います.actionは今回の動作を記述するためのjsオブジェクトで、actionのtypeとpayloadが含まれています.ここではaction creatorの概念を派生することができます.関数はactionを生成するために使用されます.

reducerはstateの更新を専門に担当し、異なるaction typeを判断することによって、異なるstateを操作して返す.ここでstateを直接操作するのではなく、clone 1部を操作し、immutableスキームなどの他のデータ構造の操作スキームを派生させることができる新しいstateを返すことに注意してください.

以上より,これは他のライブラリに依存せず,純粋なjavascript実装の完全なデカップリング状態管理スキームであることが分かった.この点、Vuexとは本質的な違いがあります.つまりVuexはVueのファミリーバケツでしか使えず、上層部の状態管理案です.Reduxとは異なり、javascriptアプリケーションの開発と組み合わせて使用できます.では、ReactでReduxをどのように統合するか、これが次に議論するReact Reduxです.
React Redux
React Reduxは、ReactでReduxスキーマを使用するライブラリです.なぜReduxの導入以外にReact Reduxを導入するステータス管理スキームを導入したのですか?
React Reduxがしたことから始める必要があります.React Reduxは何をしましたか?

各コンポーネントは、state

をdispatch actionで変更できます.

各コンポーネントは、自分の関心のあるpropsのみをレンダリングする

各コンポーネントは、グローバルstoreインスタンス

を取得することができる.

グローバルステータスの変更の購読、最新のstate

を取得

いくつかの性能最適化は、いくつかの不要なre-renderプロセス

を回避する.
いくつかの点から,React Reduxが行ったことを大まかに感知し,いくつかの汎用コードをカプセル化し,Reactでの使用を簡素化するためにAPIを露出することができる.
このようないくつかの概念が重要です.
一、Provider
コンポーネントを含んで、storeパラメータを受信して、サブコンポーネントの中ですべてconnect方法でstoreを得ることができます
二、connect()
1つの高次関数は、Reactコンポーネントを返し、主に次の2つのことをしました.

mapStateは、storeのstateをconnectされたコンポーネントにpropsとして渡し、

mapDispatchは、storeのactionをpropsの形でconnectされたコンポーネントに渡すパッケージも多く作られており、action creatorを直接伝えることができ、使用時にdispatchのプロセス

を省くことができます.
まとめ
以上は、ReduxおよびReact Reduxの概略輪郭にすぎない.この過程ではまだいくつかの問題が議論されていません.

Reduxではdispatchの1つのactionだけがstateを更新することができ、いくつかの副作用のあるプロセスをどのようにカプセル化するかについては、Reactのミドルウェアメカニズム

について議論する.

React Reduxでのパフォーマンスの最適化について
Reduxの現在のメンテナであるMark Eriksonは、Idiomatic Redux: The History and Implementation of React Reduxの文書において、React ReduxのAPIバージョンの反復過程について徹底的な分析を行い、推奨している.
リファレンスリンク

https://www.redux.org.cn/docs...

https://blog.isquaredsoftware...

https://medium.com/@dan_abram...