Ошибка ts в Redux toolkit: Property 'main' does not exist on type 'DefaultRootState'

Question

Использую React + Redux Toolkit + Typescript.

Редюсер выглядит так:

import { createSlice } from '@reduxjs/toolkit';

interface IRootState {
  test: boolean;
}

const initialState: IRootState = {
  test: true,
};

export const mainReducer = createSlice({
  name: 'mainReducer',
  initialState,
  reducers: {
    testSwitcher(state) {
      state.test = !state.test;
    },
  },
});

export const { testSwitcher } = mainReducer.actions;

export default mainReducer.reducer;

store выглядит так:

const store = configureStore({
  reducer: {
    main: mainReducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

Импорт стейта в компоненте:

const { test } = useSelector((state) => state.main);

В результате typescript показывает ошибку в state.main:

Property 'main' does not exist on type 'DefaultRootState'

Как это исправить?

Answer 1

Нужно добавить тип для стейта (там где создается стор):

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

и в селекторе указать, что стейт этого типа - тогда typescript будет знать, что в state есть объект main:

const { test } = useSelector((state: RootState) => state.main);

https://react-redux.js.org/using-react-redux/usage-with-typescript#define-root-state-and-dispatch-types

БЛОГ НА HUSL

Ошибка ts в Redux toolkit: Property 'main' does not exist on type 'DefaultRootState'

Ответы (1 шт):