Summary  
This chapter covers how to read specific parts of application state in a React component using the `useSelector` hook, ensuring components subscribe only to the data they need and update automatically when it changes.  

General domain of usage  
Front-end web application state management

コンポーネント内でストアのデータを使用するには、`useSelector` を使って読み取ります。
このフックにより、コンポーネントは現在の状態にアクセスできます。




## 状態の読み取り

コンポーネント内で `useSelector` を呼び出し、必要な部分の状態を返します:

```javascript
import { useSelector } from 'react-redux';

function Counter() {
  const value = useSelector((state) => state.counter.value);

  return <p>{value}</p>;
}
```

この関数はストア全体の状態を受け取り、必要な部分だけを選択します。





## なぜ重要なのか

コンポーネントは全体の状態に依存すべきではありません。小さな部分だけを選択することで、コンポーネントがシンプルで保守しやすくなります。

選択した状態が変化すると、コンポーネントは自動的に更新されます。手動で更新をトリガーする必要はありません。


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

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

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

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

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

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

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

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

useSelectorによる状態の読み取り

状態の読み取り

なぜ重要なのか