Reduxアプリケーションとサーバー間のデータ交換
このセクションは、Reduxで達成したところで止まらず、 このチュートリアルを最後までやり遂げることにした 熱心な学習者のためのものです。次の2つのセクションでは、 Reduxアプリケーションの非同期ロジックの扱い、アプリケーションと サーバーサイドの連携、そしてそれとのデータ交換の方法を学びます。
これまでのセクションから、Reduxアプリケーションの動作の基本は 同期メカニズムであることがわかっています。 主な動作ステップは、アプリケーションで何らかのイベントが発生した際に アクションをディスパッチし、次に関数レデューサーによってストア内の ステートを更新し、アプリケーションのコンポーネントにステートの変更を 通知し、それに応じてコンポーネントに新しいステートの値を 表示することです。
実際には、アプリケーションが非同期ロジックを必要とする場面がよくあります。
例えば、HTTP APIリクエストを扱ったり、外部サーバーからデータを取得したりする場合です。
そのため、私たちの'同期型'のReduxストアが
このような非同期ロジックを扱えるようにするために、
いわゆるミドルウェアが使用されます。
これは、私たちのアプリケーションのストアと、例えばこの章で
作業を開始するサーバーとの間の仲介役または接続役となるソフトウェアです。
Reduxには多数のそのようなミドルウェアが作成されていますが、
その中で最も広く普及しており、Reduxアプリケーションが非同期ロジックを
扱う際に公式に推奨されているのは、今のところ
Redux Thunkです。
このソフトウェアは、setTimeout、Promises、
async/awaitのような非同期ロジックを含むことができる
通常の関数(またはサンク)を使用してストアと対話するのに役立ちます。
用語自体に関しては、thunkは何らかの遅延作業を行うコードです。
これで、Reduxで非同期ロジックをどのように扱うかについて少し理解できたので、 私たちのアプリケーションでこの段階を実装する作業に取り掛かることができます。 私たちのアプリケーションが、データを受け取ったり送信したりすることで 外部サーバーと対話できるようにする必要があります。 言い換えれば、私たちの前に待ち受けているのは 刺激的で非常に重要なトピックです。さあ、始めましょう。