react では、react-redux ライブラリを redux に関連付けることができます。react-redux は、より科学的な方法でコードを編成できるカプセル化を提供し、React コードで Redux をより快適に使用できるようにします。
このチュートリアルの動作環境: Windows7 システム、React17 バージョン この方法は、すべてのブランドのコンピューターに適しています。
Redux 自体は React とは関係なく、アプリの状態管理に使用される一般的な Javascript アプリ モジュールです。 React プロジェクトで Redux を使用するには、react-redux ライブラリを使用して接続する方が良い方法です。これは、react-redux がないと、これら 2 つのライブラリは一緒に使用されないことを意味します。react-redux は、いくつかのカプセル化を提供します。コードを整理する科学的な方法により、React コードで Redux をより快適に使用できるようになります。
redux と React はどのように連携しますか?
react-redux は、connect と Provider という 2 つの基本的な友人を提供します。これらは、コンポーネントと redux を接続します。プロバイダーは、ストアをコンポーネントに渡します。コンポーネントは、ディスパッチを通じてアクションを発行します。ストアは、はアクションに基づいています。type 属性は、対応するレデューサーを呼び出し、状態とこのアクションを渡します。リデューサーは状態を処理し、新しい状態を返し、ストアに入れます。Connect はストア内の変更を監視し、setState を呼び出して、コンポーネントを更新します。このとき、コンポーネントの props もそれに応じて変更されます。
プロバイダ:
プロバイダは、ストアをプロパティとして受け入れ、コンテキストを通じてそれを渡すコンポーネントです。この反応内のコンポーネントはすべて、コンテキストを通じてストアを取得できます。
connect:
connect(mapStateToProps, mapDispatchToProps, mergeProps, options) は、4 つのパラメーターを受け入れ、関数 wrapWithConnect を返す関数です。wrapWithConnect は、コンポーネントを次のように受け入れます。パラメータwrapWithConnect(component)。新しいコンポーネントconnect(コンテナコンポーネント)を内部的に定義し、受信コンポーネントをconnectのサブコンポーネントとして使用し、それを返します。
mapStateToProps(state.[ownPros]):
mapStateToProps は、ストア状態とカスタム プロパティの 2 つのパラメーターを受け取り、新しいオブジェクトを返します。このオブジェクトは次のオブジェクトに渡されます。小道具の一部としての UI コンポーネント。コンポーネントが必要とするデータに基づいて返されるオブジェクトをカスタマイズできます。ownProps を変更すると、mapStateToProps
mapDispatchToProps(dispatch,[ownProps]):
## もトリガーされます。 #mapDispatchToProps if それがオブジェクトの場合、ストアにバインドされ、props の一部として UI コンポーネントに渡されます。この関数が 2 つのパラメーターを受け入れる場合、bindActionCreators はアクションをバインドしてディスパッチし、オブジェクトを返します。このオブジェクトは、props の一部として ownProps とともに UI コンポーネントに渡されるため、mapDispatchToProps がオブジェクトであるか関数であるかに関係なく、最終的にはobject. 、関数の場合、このオブジェクトのキー値をカスタマイズできます。 プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !
以上がredux はどう反応するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。