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

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
03/14 17:28

edit