Summary  
This chapter covers how to dispatch asynchronous actions when a component loads and keep the UI in sync by automatically updating it based on loading, success, and error states.

General domain of usage  
Front-end user interfaces

## 作成するもの

ここでは、非同期状態をUIに接続します。





## フェッチのトリガー

コンポーネントの読み込み時に非同期アクションをディスパッチします:

```javascript
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchPosts } from './postsThunk';

function Posts() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);
}
```



## UIの同期維持

アクションがディスパッチされると：

* Reduxが状態を更新
* コンポーネントが自動的に再レンダリング
* UIが最新データを反映





## 結果

UIが実際のデータに応答:

* ローディングの表示;
* 結果の表示;
* エラーの処理。


Redux Toolkitを使用してReactの複雑なアプリケーション状態を管理する方法を学びます。Reduxが本当に必要な場面を理解し、スライスで状態を構築し、非同期データを処理し、すべてを予測可能なフローに接続します。

Redux Toolkitが存在する理由と、それが有用になるタイミングを理解します。実際のアプリケーションで状態の複雑さがどのように増大するか、そしてなぜ単純なアプローチでは拡張性が失われるのかを認識します。

Redux Toolkitのインストールとストアのセットアップ。ReduxをReactアプリケーションに接続し、データがシステム内でどのように流れるかを理解する。

スライスを使用して状態を定義し、ロジックを明確に整理します。リデューサーを作成し、生成されたアクションを利用して、アプリケーションの成長に伴って状態を管理しやすく保ちます。

useSelectorを使用してストアからデータを読み取り、useDispatchで更新します。状態を正しく構造化し、共有データを扱う際の一般的なミスを回避します。

createAsyncThunkを使用してAPIからデータを取得します。ローディング状態やエラー状態を管理し、非同期更新とUIの同期を保ちます。

状態を複数のスライスに分割し、機能ごとにファイルを整理します。リデューサーを適切に結合し、アプリケーションの成長に伴って明確な構造を維持します。

Redux Toolkitを使用して完全なアプリケーションを構築します。CRUD機能の実装、非同期データの処理、ローディングやエラー状態によるユーザー体験の向上を行います。

非同期結果に基づくUIの更新

作成するもの

フェッチのトリガー

UIの同期維持

結果