typescript - (parameter) state: ukjent Objekt er av typen 'ukjent'. redux TS

const submitted = useSelector((state) => state.post.submitted)

For ovennevnte tilstand. Jeg får feil:

(parameter) tilstand: ukjent Objektet er av typen 'ukjent'.

Hvordan fikser man dette?

Jeg har enkel skjæring + lagring:

import { createSlice } from '@reduxjs/toolkit'

export const postSlice = createSlice({
  name: 'post',
  initialState: {
    shared: false,
    submitted: false,
  },
  reducers: {
    setShared: (state, action) => {
      state.shared = action.payload
    },
    setSubmitted: (state, action) => {
      state.submitted = action.payload
    },
  },
})

export const { setShared, setSubmitted } = postSlice.actions
export default postSlice.reducer

import { configureStore, combineReducers } from '@reduxjs/toolkit'

//import slice as reducer
import postReducer from './features/postSlice'

const rootReducer = combineReducers({
  //combine all reducers
  post: postReducer,
})

export const store = configureStore({
  reducer: rootReducer,
})

Jeg får ikke denne typen feil i Javascript, men den dukker opp i TS? Hvilke typer må deklareres for dette hvis nødvendig?

Svar #1

Du bør følge TypeScript QuickStart-guiden og sette opp korrekt typede hooks:

// store.ts

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

//hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Svar #2

useSelector er generisk og kan ikke bestemme hvilken type state er, så den bruker som standard unknown. Du må gi state en typeannotasjon som samsvarer med formen til initialState, så du må trekke det ut fra slice-definisjonen.

  1. Definer grensesnittet (eller bruk en type/typealias hvis du foretrekker det)
interface MyState {
  shared: boolean
  submitted: boolean
}
  1. Type cast initialState, eller bruk en mellomliggende typen variabel (jeg tror dette er valgfritt, men et blikk på de dokumenterte eksemplene antyder at dette er mulig):
  // ...
  initialState: {
    shared: false,
    submitted: false,
  } as MyState,
  // ...
  1. Legg til en typeannotasjon for tilbakekallingen
const submitted = useSelector((state: MyState) => state.post.submitted)

Relaterte artikler