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 />
 }

↓参考リンク

profile

asunaro.jpg

あすなろ


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

Home

© Asunaro 2022