Summary  
This chapter explains how to integrate multiple slice reducers into a single Redux store using configureStore, assigning each slice to its own key in the global state.

General domain of usage  
Front-end application state management

複数のスライスがある場合、ストアでそれらを結合する必要があります。
Redux Toolkit により、これが簡単に行えます。



## スライスの結合

すべてのスライスリデューサーを `configureStore` に渡します:

```javascript
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/user/userSlice';
import tasksReducer from '../features/tasks/tasksSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    tasks: tasksReducer
  }
});
```


各スライスはグローバルステートのキーとなります。

次のようにアクセスできます:

* `state.user`;
* `state.tasks`。



これにより、ステートが構造化され予測しやすくなります。アプリの各部分がストア内で明確な場所を持ちます。



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

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

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

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

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

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

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

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

リデューサーのクリーンな結合

スライスの結合