フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

Redux のフック

● ざっくりRedux

1. ディスパッチ = アクションをストアに送信する

  • ディスパッチは実行したい「関数」そのものではなく、「アクションオブジェクト」をストアに送信します。
  • アクションオブジェクトには、実行したい「関数」を特定するための情報(type プロパティなど)を含めます。

2. ストアはディスパッチを受け取り、リデューサーへ処理を渡す

  • ストアはディスパッチされたアクションを受け取り、そのアクションの type に基づいて、適切なリデューサーに処理を渡します。
  • リデューサーはアクションの内容を元に新しい状態を計算します。

3. リデューサーが状態を更新する

  • リデューサーは純粋な関数で、アクションに基づいて状態を計算します。
  • リデューサー自体は実行可能な関数ですが、副作用のない状態変換ロジックのみを持っています。(純粋関数
  • リデューサーが実行され、新しい状態がストアに保存されます。

● 純粋関数とは

純粋な関数(Pure Function)は、副作用のない関数を指します。これには次の2つの特性があります。

1. 同じ入力に対して必ず同じ結果を返す
 ・入力値が変わらない限り、常に同じ出力を返します。(参照透過性)
 ・例: const add = (a, b) => a + b;

2. 副作用を持たない
 ・関数外の状態に影響を与えたり、関数外の状態から影響を受けたりしません。
 ・例: グローバル変数を変更しない、APIコールやファイルシステムの操作をしない

● 副作用とは

プログラムにおける副作用は、関数が以下のような状態変化や外部とのやりとりを行うことを指します。

1. 外部データの読み書き
 ・データベース、ファイルシステム、ネットワーク通信、ブラウザのローカルストレージなど。
 ・例: ファイルを書き込む、APIからデータを取得する
2. グローバル変数や外部状態の変更
 ・関数外の変数を変更すること。
 ・例: グローバルなカウンタ変数をインクリメントする
3. ユーザーインターフェースの操作
 ・DOMの変更やアラート表示など。
 ・例: ユーザーにアラートを表示する、DOMの要素を直接操作する
4. ランダム性の導入
 ・関数の結果がランダムである場合。
 ・例: Math.random() のような乱数生成
5. 時間に依存する要素
 ・関数の結果が時間に依存する場合。
 ・例: Date.now() を使う

● Redux のフック

useSelector

  • 用途: Redux ストアの状態からデータを選択(抽出)するために使用します。
  • 使い方: useSelector(selectorFunction) は、selectorFunction を使用して Redux ストアの状態から特定の部分を選択します。このフックを使用すると、コンポーネントは選択した状態の部分が更新されるたびに再レンダリングされます。

useDispatch

  • 用途: Redux ストアにアクションをディスパッチ(運ぶ)するために使用します。
  • 使い方: const dispatch = useDispatch() でフックを使用して、dispatch 関数を取得します。この関数を通じてアクションをディスパッチすることができます(例: dispatch({ type: 'ACTION_TYPE' }))。

useStore

  • 用途: コンポーネント内で直接 Redux ストアにアクセスするために使用します。
  • 使い方: const store = useStore() でフックを使用して、Redux ストアのインスタンスを取得します。これは、主に現在のストアの状態へのアクセスや、ストアの dispatch 関数の使用を目的としていますが、通常は useSelectoruseDispatch によってカバーされるため、useStore の使用は限定的です。

useActions (Redux Toolkit)

  • 用途: アクションクリエーターを自動的にディスパッチ関数にバインドするために使用されます。このフックは Redux Toolkit の bindActionCreators ユーティリティに基づいており、特定のアクションクリエーターを簡単に使用できるようにします。
  • 使い方: このフックは Redux Toolkit の標準機能ではありませんが、bindActionCreators を使用してカスタムフックとして簡単に作成できます。アクションクリエーターをディスパッチ関数にバインドし、その結果として得られるバインドされたアクションクリエーター関数をコンポーネントから直接呼び出すことができます。

● Redux の createAction / createReducer / createSlice

https://zenn.dev/luvmini511/articles/819d8c7fa13101

● Redux の reselect と createSelector

https://zenn.dev/forcia_tech/articles/20220428_hatano_redux_reselect

● Redux-Thunk (または Redux-Saga)の非同期処理

Redux-Thunkで非同期処理ができる仕組みを理解しよう #React - Qiita

unwrap() して使用します

const resultAction = await dispatch(fetchUserData(userId));
const user = unwrapResult(resultAction);

または

const resultAction = await dispatch(fetchUserData(userId)).unwrap();
No.2466
05/10 12:00

edit