Redux + TypeScriptで複数Reducerを結合したRootReducerの型を取得する方法

Reduxを使用したプロジェクトで複数のreducerをcombineReducerを使って結合した場合に生成されるRootReducerの型が分からず困ったため、良い方法はないかと公式ドキュメントを探っていたら一発で取得できる方法が紹介されていたので邦訳の意味を込めて紹介する。

やり方

次の方法で取得できる。

export type RootState = ReturnType<typeof store.getstate>;

この方法を使う文脈

こんな場合に使える。(※ReduxToolKitを使った実装の前提)

// reducerの結合
const reducers = combineReducers({
  user: userSlice.reducer,
  hoge: hogeSlice.reducer
});

// storeとreducersを紐付け
const store = configureStore({
  reducer: reducers
});

export default store;

// 結合したreducerのstateTree全体の型を取得する
export type RootState = ReturnType<typeof store.getstate>;

取得した型を活用できる場面

この方法で取得した型を活用する1つのケースとして、useSelectorで値を取得する際にRootReducerの型を指定する必要がある場合などが挙げられる。

useSelector<RootState, userState>((state)=> state.users);