目次
状況
TypeScript + Next.js + Reduxで以下のようにuseSelectorを使おうとした際，useSelectorの引数でts(2339)が出た。
const Component = () => {
const current_page = useSelector(state => state.page.current_page) // ← この部分
switch (current_page) {
case 'project':
return <HomeProject />
default:
return <Dashboard />
}
解決策
useSelectorの引数の無名関数における引数（上のコードのstate）の型を指定する
- useSelectorで取り出す状態の型（ここではRootState）を定義
import { combineReducers } from "redux";
import inputReducer from "./reducers/input";
import pageReducer from "./reducers/page";
import { configureStore } from "@reduxjs/toolkit";
const rootReducer = combineReducers({input: inputReducer, page: pageReducer})
export const store = configureStore({
reducer: rootReducer
})
store.subscribe(()=> {console.log(store.getState())})
export type RootState = ReturnType<typeof store.getState>
export type RootDispatch = typeof store.dispatch
2.stateの型を指定
const Component = () => {
const current_page = useSelector((state: RootState) => state.page.current_page)
switch (current_page) {
case 'project':
return <HomeProject />
default:
return <Dashboard />
}
↓参考リンク
