Home
2022.04.23

TypescriptでuseSelectorを使ったらエラーが出た

reduxのロゴ

目次

状況

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)の型を指定する
1. 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 />
 }


参考:https://stackoverflow.com/questions/60777859/ts2339-property-tsreducer-does-not-exist-on-type-defaultrootstate

profile

あすなろ


都内の大学生。web開発を中心にプログラミングの情報を発信

目次

Home
プログラミング
その他
© Asunaro 2022