react-reduxのstoreでのtype宣言を無くす

ジェネリクスを完結にすることから始まりました。

react-reduxのuseSelectorする時いちいちジェネリクスを記述する雰囲気どうにかしたいな。。。
ググって先駆者を探していた所下記にたどり着きました。
react-redux の Hooks API に Generics は要らない

これで、ジェネリクスは記述する必要なくはなりました。

次なる問題、storeでのtype宣言が面倒臭い

今回はreducerから型を作り出して、DefaultRootStateにセットしてしまう試みです。

まず、declareを宣言して、StoreStateをreducerを元に生成します。

globals.d.ts

import { reducers } from "../stores";
import { Reducer } from "@reduxjs/toolkit";

type StoreState = {
  [key in keyof typeof reducers]: typeof reducers[key] extends Reducer<
    infer T,
    AnyAction
  >
    ? T
    : never;
};

declare module "react-redux" {
  interface DefaultRootState extends StoreState {}
}

そうすることで、storeが完結に書けるように。

store.ts

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import "react-redux";
import reduxThunk from "redux-thunk";
import sliceReducer from "./slice";

export const reducers = {
  sliceReducer,
  // slice etc...
};

const reducer = combineReducers(reducers);
const store = configureStore({ reducer, middleware: [reduxThunk] });

export default store;