React と Redux での react-redux の接続について (詳細なチュートリアル)

この記事では、React と Redux の関係である、react-redux を中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

私は以前から React 関連のことを調べていて、SPA プロジェクトも手元にあるので、Redux を試す準備ができています。 Redux 自体は React とは関係がありません。これは、アプリの状態管理に使用される一般的な Javascript アプリ モジュールです。 React プロジェクトで Redux を使用するには、react-redux ライブラリを使用して接続することをお勧めします。これは、react-redux を使用しないと、これら 2 つのライブラリが何らかのカプセル化を提供しないことを意味します。コードを整理する科学的な方法により、React コードで Redux をより快適に使用できるようになります。

以前は、Redux ドキュメントを通じてのみ React-redux について学びました。一定期間練習した後、ソース コードを調べて、関連する要約をいくつか作成するつもりです。私が調べているコードの npm バージョンは v4.0.0 です。つまり、使用されている React バージョンは 0.14.x です。

react-redux は、プロバイダーと接続という 2 つの主要なモジュールを提供します。

プロバイダー

プロバイダー このモジュールは、元のアプリコンテナーに基づく追加レイヤーであり、Redux ストアをプロップとして受け入れて追加することです。 context の属性の 1 つとして宣言されているため、サブコンポーネントは contextTypes を宣言した後、 this.context.store を通じてストアに簡単にアクセスできます。ただし、通常、コンポーネントはこれを行う必要はありません。ストアは次の接続のコンテキスト内に配置されます。

これはプロバイダーの使用例です:

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById(&#39;root&#39;)
)

connect

このモジュールはReduxとReactの間の実際の接続であり、その名前はconnectとも呼ばれます。

まず、Redux がどのように機能するかを考えてみましょう。まず、ストア内で状態が維持され、アクションをディスパッチし、次にリデューサーがこのアクションに基づいて状態を更新します。

React アプリケーションにマッピングされ、ストアで維持される状態がアプリの状態です。React コンポーネントはビュー レイヤーとして機能し、レンダリングとユーザー操作への応答という 2 つのことを行います。したがって、connect は、ストア内の必要なデータを props として React コンポーネントに渡してレンダリングし、アクション クリエーターをラップしてユーザーの操作に応じてアクションをディスパッチすることです。

それでは、connect モジュールの機能を詳しく見てみましょう。その使用方法から始めましょう。その API は次のとおりです:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps は関数であり、戻り値は props にマージする必要がある状態を表します。デフォルト値は () => ({}) で、何も渡されないことを意味します。

(state, props) => ({ }) // 通常会省略第二个参数

mapDispatchToProps は、props のみをマージする必要がある actionCreators を表す関数にすることができます。ここでの actionCreator は、redux の bindingActionCreators 関数を使用することをお勧めします。

(dispatch, props) => ({ // 通常会省略第二个参数
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

さらに便利なのは、オブジェクトを直接受け取ることができることです。このとき、connect 関数はそれを関数に変換します。この関数は上記の例とまったく同じです。

mergeProps はマージプロセスをカスタマイズするために使用されます。以下はデフォルトのプロセスです。parentProps の値は、コンポーネントの props に同じ名前が表示される場合、上書きされることがわかります。 。

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

オプションには2つのスイッチがあります: pure は最適化をオンにするかどうかを表します。詳細は後述します。デフォルトは true、withRef は内部にパッケージ化されたコンポーネントに参照を与えるために使用されます。この参照は getWrappedInstance メソッドを通じて取得できます。デフォルトは false です。

connect は、React コンポーネントのコンストラクターを接続オブジェクトとして受け入れる関数を返し、最後に接続されたコンポーネントのコンストラクターを返します。

それでは、いくつか質問します:

1. React コンポーネントはストアの変更にどのように応答しますか?

2. connect が状態全体を直接渡すのではなく、一部のプロパティを選択的にマージするのはなぜですか?

3. Pure は何を最適化しますか?

connect Connector によって返される関数を呼び出します。これは、元のコンポーネントのパッケージ化に基づいて、パッケージ化されたコンポーネントによって使用されるように、Redux ストア内の変更も内部的に監視します。ストアの変更に応答できます:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

ただし、通常、接続するのはコンテナ コンポーネントであり、すべてのアプリの状態を保持するわけではありません。ただし、ハンドラーはすべての状態の変更に応答するため、最適化する必要があるのは次のとおりです。対応する React コンポーネントは、実際に依存している状態の部分が変更された場合にのみ再レンダリングされます。では、実際に依存している部分は何でしょうか。これは、mapStateToProps および mapDispatchToProps を通じて取得されます。

具体的な最適化方法は shouldComponentUpdate をチェックインすることです。コンポーネント自体の props が変更された場合、mapStateToProps の結果が変更された場合、または mapDispatchToProps の結果が変更された場合にのみ shouldComponentUpdate が true を返す場合、チェック方法はshallowEqual を比較することです。

そのため、特定のリデューサーについては次のようになります:

export default (state = {}, action) => {
 return { ...state } // 返回的是一个新的对象，可能会使组件reRender
 // return state // 可能不会使得组件reRender
}

さらに、接続するときは、不必要なパフォーマンスの損失を避けるために、本当に必要な state または actionCreators を props にマッピングするように注意してください。

最後に、connect API によると、ES7 のデコレーター関数を使用して React ES6 の記述方法に一致させることができることがわかりました。

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

以上が、皆さんの参考になれば幸いです。未来。

関連記事:

JSソートアルゴリズム概要について

JS+canvasを使った円錐の作り方

vue-routerでルートの遅延読み込みを実装する方法

Angular2でtsファイルのブレークポイントデバッグを実装する方法

Web速報の上スクロールを実現する方法

vueでの関連フォルダ構成設定

以上がReact と Redux での react-redux の接続について (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。