開発者ドキュメント

Reduxと反応して状態を管理する方法

著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Redux は、JavaScriptおよびReactアプリケーションで人気のあるデータストアです。 データバインディングは一方向に流れ、信頼できる唯一の情報源として保存する必要があるという中心的な原則に従います。 Reduxは、設計コンセプトが単純で、実装が比較的小さいために人気を博しました。

Reduxはいくつかの概念に従って動作します。 まず、 store は、データを選択するたびにフィールドを持つ単一のオブジェクトです。 データを更新するには、データの変更方法を示すアクションをディスパッチします。 次に、アクションを解釈し、reducersを使用してデータを更新します。 レデューサーは、以前の状態を変更する代わりに、データにアクションを適用し、新しい状態を返す関数です。

小さなアプリケーションでは、グローバルデータストアは必要ない場合があります。 ローカル状態コンテキストを組み合わせて状態を管理できます。 ただし、アプリケーションの規模が大きくなると、ルートやコンポーネント間で情報が保持されるように、情報を一元的に保存することが有益な状況に遭遇する可能性があります。 そのような状況では、Reduxは組織化された方法でデータを保存および取得するための標準的な方法を提供します。

このチュートリアルでは、バードウォッチングテストアプリケーションを構築して、ReactアプリケーションでReduxを使用します。 ユーザーは、見た鳥を追加したり、もう一度見るたびに鳥を増やしたりすることができます。 単一のデータストアを構築し、ストアを更新するためのアクションとレデューサーを作成します。 次に、データをコンポーネントにプルし、新しい変更をディスパッチしてデータを更新します。

前提条件

モバイルバージョンを終了