React ReductのTypescriptテンプレート調査 app/store.ts

2022年8月29日2022年10月25日

目的

• React Reduxを使う上で抑えるべきパターンを把握する

コード

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

• 4行目
  • storeを作成
    • configureStoreはcreateStore関数を抽象化したもの
      • 大体の場合に必要なmiddlewareを含んでいる
      • reducerプロパティにReducerを設定する必要あり
        Reducerは../features/counter/counterSlice.tsで定義されている
• 10行目
  • AppDispatchにDispatchのtypeを設定し、exportしている
    • 別ファイルでDispatchを作成する場合、ここで設定したAppDispatchをtypeに指定できるようにしておくと記述量が減る＋Storeから取得しておくことで、StateやMiddlewareの構造を追加・変更したときにも対応可能
• 11行目
  • RootStateにstateのtypeを設定し、exportしている
    • 別ファイルでSelectorを作成する場合、ここで設定したRootStateをtypeに指定できるようにしておくと記述量が減る＋Storeから取得しておくことで、StateやMiddlewareの構造を追加・変更したときにも対応可能
    • ReturnTypeはある関数の出力Typeを得ることができるTypeScriptのUtility type
      • < >内に設定するのは関数シグネチャなので、typeof store.getStateで関数シグネチャを取得している
      • Utility typeはParameters Typeとは似て非なるもの
      • ある関数の出力が他の関数で必要な時に便利
    • Notes on TypeScript: ReturnType – DEV Community 👩‍💻👨‍💻
• 12行目
  • AppThunk
    • ReduxでのThunkとは、Storeと同期・非同期のやり取りを行うMiddleware
      • Thunk関数はDispatchとgetStateをパラメータとして受け取る
      • Reducerに書かないような非同期処理などをThunkに書く
      • （プログラムでの）もともとのThunkの意味は、実行開始まで遅延のある処理
        参考：Thunk – Wikipedia
    • ThunkAction型は下記のような定義
      export type ThunkAction<
R, // Return type of the thunk function
S, // state type used by getState
E, // any "extra argument" injected into the thunk
A extends Action // known types of actions that can be dispatched
> = (dispatch: ThunkDispatch<S, E, A>, getState: () => S, extraArgument: E) => R
      • Rには、Thunk関数の戻り値のtype
      • Sには、stateのtype
      • Eには、Thunkに（DispatchとgetState以外で）追加で設定したい引数
      • Aには、Actionのtype
    • https://qiita.com/IgnorantCoder/items/ac681c97eb8318a87bb3
    • Writing Logic with Thunks | Redux