Reactのreact-redux

react-redux関連概念と設計思想紹介
1、react-reduxは、すべてのコンポーネントを2つのUIコンポーネント(UIの提示担当)とコンテナコンポーネント(データと論理の管理)に分類する.
2、UIコンポーネントの特徴

は、UIの提示のみを担当し、業務ロジックを一切持たない

.

は状態がない(つまり、this.stateという変数を使用しない)ので、react-reduxを使用した後、クラスステートメントではなく、コンポーネントを推薦します.

のすべてのデータはパラメータ(this.props)によって提供される

.

は、任意のReduxを使用しないAPI

である.

は、状態を含まないので、UIコンポーネントはまた「純粋なコンポーネント」とも呼ばれる.すなわち、純粋な関数と同様に、パラメータによって彼の値が決定される.

3、コンテナコンポーネント(サブコンポーネントを含む親コンポーネントに相当)、コンテナコンポーネントはUIコンポーネントを含む.

はデータと業務ロジックの管理を担当しています.UI表現を担当していません.

は、内部状態

を有する.

Reduxを使用するAPI

4.UIコンポーネントとコンテナコンポーネントの結合

は、一つのコンポーネントがUIとトラフィック論理を有している場合、それを二層構造に分割する.外はコンテナコンポーネントで、中はUIコンポーネントである.前者は外部との通信を担当し、後者にデータを送る.後者は表示をレンダリングする.

react-reduxは、すべてのUIコンポーネントがユーザによって提供され、コンテナコンポーネントはreact-reduxによって自動的に生成されると規定している.

5、react-reduxのいくつかのAPI概念:

react-reduxのconnectは、UIコンポーネントからコンテナコンポーネント

を生成するために使用される.

connectには2つのよく使われるパラメータがあります.mapStateToProps()  mapDisplatch ToProps()

mapStateToPropsは関数です.その役割は、外部state(すなわちstore内のデータ)オブジェクトからUIコンポーネントのpropsオブジェクトへのマッピング関係を確立することである.実行後にオブジェクトに戻ります.各キーのペアはマッピングです.mapStateToPropsはSToreを購読します.stateが更新されるたびに自動的に実行され、UIコンポーネントのパラメータを再計算して、UIコンポーネントの再レンダリングをトリガします.mapStateToPropsの最初のパラメータは常にstateオブジェクトであり、また、第二のパラメータを使用して、容器アセンブリのpropsオブジェクトを表すことができる.ownPropsをパラメータとして使用すると、コンテナコンポーネントのパラメータが変化すると、UIコンポーネントの再レンダリングを誘発することがある

.

、connect方法がmapStateToPropsパラメータを省略すると、UIコンポーネントはstoreを購読しない、つまり、storeの更新はUIコンポーネントの更新を引き起こしない.

mapDisplatToPropsは、UIコンポーネントのパラメータをstore.dispatch方法にマッピングするためのconnect関数の2番目のパラメータであり、すなわち、ユーザの操作をActとして扱うべきか、storeに伝えるべきかを定義しています.彼は関数でもあり、オブジェクトでもあります.mapDisplatch ToPropsが関数である場合、dispatchとownProps(コンテナコンポーネントのpropsオブジェクト)の2つのパラメータが得られ、オブジェクトに戻るべきである.オブジェクトの各キー値ペアはマッピングであり、UIコンポーネントのパラメータはどのようにactionを出すかを定義している.mapDisplatToPropsがオブジェクトである場合、各キー名もUIコンポーネントの同名パラメータに対応しており、キー値はパラメータであるべきであり、action creatorとして返されたactionはreduxから自動的に

を発行される.
6、react-reduxのコンポーネントconnect方法でコンテナコンポーネントを生成した後、コンテナコンポーネントをstateオブジェクトに持たせる必要があり、UIコンポーネントのパラメータを生成することができる.一つの解決方法は、stateオブジェクトをパラメータとしてコンテナコンポーネントに導入することである.しかし、コンテナのセットは深いレベルにあるかもしれません.一級レベルでstateを送るのは面倒くさいです.
このためにreact-reduxはProviderのコンポーネントを提供して、容器のコンポーネントをstateに持っていくことができて、ルートの部品の外で1階のProviderをパンして、Appのすべてのサブコンポーネントはすべてstateを得ることができて、その原理はReactコンポーネントのcontext属性で、storeはコンテキストの対象のcontextの上に置きました.react-redux自動的に生成されるコンテナコンポーネントのコードは、以下のようになります.サブコンポーネントはcontextからstoreに届きます.

7、以上の紹介をまとめました.react-reduxの思想はUIコンポーネントと業務ロジックを状態管理で分離することです.
 
転載先:https://www.cnblogs.com/zjl-712/p/11426097.html