Redux-react-example
提供:Dev Guides
Redux-Reactの例
次に、反応とReduxアプリケーションの小さな例を示します。 小さなアプリの開発を試すこともできます。 増加または減少カウンターのサンプルコードは以下のとおりです-
これは、ストアの作成と、reactアプリコンポーネントのレンダリングを行うルートファイルです。
これは、reactのルートコンポーネントです。 カウンターコンテナコンポーネントを子としてレンダリングする役割を果たします。
以下は、コンポーネントを反応させるためにReduxの状態を提供する責任があるコンテナコンポーネントです-
以下は、ビューの一部を担当する反応コンポーネントです-
以下は、アクションの作成を担当するアクション作成者です-
以下に、Reduxの状態を更新するためのreducerファイルのコード行を示しました。
最初は、アプリは次のように見えます-
インクリメントを2回クリックすると、出力画面は次のようになります-
我々は一度それをデクリメントすると、次の画面が表示されます-
また、リセットすると、アプリは初期値に戻り、カウンター値0になります。 これは以下に示されています-
最初のインクリメントアクションが行われたときにRedux開発ツールで何が起こるかを理解しましょう-
アプリの状態は、インクリメントアクションのみがディスパッチされ、残りのアクションがスキップされる時点に移動します。
自分で課題として小さなTodoアプリを開発し、Reduxツールをよりよく理解することをお勧めします。