Reduxアプリケーションの動作に関する議論

前回のレッスンでは、Reduxアプリケーションが動作するために必要な すべての構成要素を実装しました。 ここでまとめとして、製品に関する私たちのアプリケーションの 主要な動作段階を簡単に見ていきましょう。

最初の起動時、私たちのアプリケーションはstoreから 2つの製品のリストをuseSelectorを使って取得し、 画面に表示します。画面上には、新しい製品のデータを 入力できるフォームも表示されます。ユーザーが保存ボタンを 押すと、ボタンのハンドラは、ユーザーがフォームに入力した 新しい製品のデータを含むアクションproductAddedをディスパッチします。 製品スライス用に作成したレデューサー関数がこのアクションを受け取り、 製品の配列に新しい製品オブジェクトを追加します。 Storeは、保存されているstateデータが変更されたことを コンポーネントに通知します。私たちのProductsListコンポーネントは 変更された配列を読み取り、レンダリングをトリガーし、 その結果として追加された製品が製品リストに表示されます。

では、ブラウザでRedux DevToolsを開き、 アプリケーションにもう一つ製品を追加してから、 Log monitorタブを見てみましょう。ここでは、 アプリケーション起動時のstateの状態と、 その後、保存ボタンを押した後にアクションが発生し、 そのpayloadプロパティやグローバルステートの 変化を確認することができます。

次の章では、Reduxアプリケーション内のデータをもっと しっかりと扱っていきます。