useSelector 'state'は 'unknown' 型です

はじめに

Redux ToolkitをReactプロジェクトでTypeScriptと共に利用する際、useSelectorを通じてstateを取得しようとすると、「'state'は 'unknown' 型です」という型エラーに遭遇することがあります。本記事では、この一般的なエラーの解決法をステップバイステップでご紹介します。

問題の概要

このエラーの根本的な原因は、TypeScriptがuseSelectorのコールバック引数stateの型を正しく推論できない点にあります。これは、TypeScriptがどのstoreのstateを参照しているのかがわからないためです。

const { user, error, loading } = useSelector((state) => state.user); // 'state'は 'unknown' 型です

型定義の追加

Redux Toolkitと共に、まずstoreのstateに対する型を定義します。storeのgetStateメソッドの戻り値の型を利用して、アプリケーション全体で利用するRootState型を作成します。

import { configureStore } from '@reduxjs/toolkit';
import userSlice from '../features/userSlice';

export const store = configureStore({
  reducer: {
    user: userSlice,
  },
});

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

型付きuseSelectorの作成

次に、新たに定義したRootState型を用いて、型情報付きのuseSelectorフックを宣言します。これにより、useSelectorがstoreのstateを正しく型推論できるようになります。

//追加
import { useSelector as rawUseSelector, TypedUseSelectorHook } from 'react-redux';

export const store = configureStore({
  reducer: {
    user: userSlice,
  },
});

export type RootState = ReturnType<typeof store.getState>;
//追加
export const useSelector: TypedUseSelectorHook<RootState> = rawUseSelector;

カスタムuseSelectorの正確なインポート

最後に、エラーが発生したコンポーネントで、作成したカスタムuseSelectorを正確にインポートしましょう。直接react-reduxからuseSelectorをインポートするのではなく、新しく作成した型付きのuseSelectorをインポートすることで、型エラーは解消されます。

import { useSelector } from 'みなさんの/プロジェクト/storeの/パス';

まとめ

Redux ToolkitとTypeScriptを組み合わせて開発する際に、useSelectorを使用すると型エラーに遭遇する可能性があります。本記事で紹介したステップに従うことで、stateの型を正確に推論し、エラーを解消できます。適切に型を定義し、カスタムuseSelectorを利用することで、安全かつ効率的な開発が可能となります。