Summary  
This chapter covers organizing a project’s directory structure and defining the shape of data objects for state management.

General domain of usage  
Task management applications


このセクションでは、シンプルな**タスク管理**アプリを作成します。

このアプリでは、ユーザーは以下のことができます：

* タスクの作成
* タスクの完了状態の切り替え
* タスクの削除
* APIから初期タスクの読み込み



## プロジェクト構成

```bash
src/
  app/
    store.js
  features/
    tasks/
      tasksSlice.js
  components/
    TaskForm.jsx
    TaskList.jsx
    TaskItem.jsx
  App.jsx
  main.jsx
```



## タスクの構造

各タスクは次のような形になります：

```javascript
{
  id: 1,
  title: 'Learn Redux Toolkit',
  completed: false
}
```

この構造はシンプルですが、Redux Toolkit を適切に練習するのに十分現実的です。



プロジェクトの構成とデータの形状を定義。これにより、次のステップで状態や機能を構築するための明確な基盤が得られる。

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

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

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

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

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

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

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

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

プロジェクトセットアップとデータ構造

プロジェクト構成

タスクの構造