В общем вопрос в заголовке.
spoiler//store.ts
import { configureStore } from "@reduxjs/toolkit";
import settngReducer from "./settingsSlice";
const store = configureStore({
reducer: {
settings: settngReducer,
},
});
export default store;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
spoiler//settingsSlice.ts
import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
export interface SettingState {
theme: string;
language: string;
}
const initialState: SettingState = {
theme: "light",
language: "ua",
};
export const settingsSlice = createSlice({
name: "settings",
initialState,
reducers: {
setTheme: (state, action: PayloadAction<string>) => {
state.theme = action.payload;
},
setLanguage: (state, action: PayloadAction<string>) => {
state.language = action.payload;
},
},
});
export const { setTheme, setLanguage } = settingsSlice.actions;
export default settingsSlice.reducer;
spoiler//storeHooks.ts . Хуки добавлены по совету из доков,
//но напрямую с useDispatch проблема сохраняется
import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "./store";
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
В компоненте пытаюсь использовать так:
const Settings = () => {
const store = useAppSelector((state) => state.settings);
const dispatch = useAppDispatch();
...
<select
onChange={()=>dispatch(setTheme("dark"))}
>
setTheme подчеркнуто. Ошибка Cannot find name 'setTheme'.ts(2304).
Полотно кода большое, но не имею представления в чем дело. Любая наводка приветствуется.
При этом типизация импортированного хука useAppDispatch выглядит так при наведении курсора:
alias) useAppDispatch(): ThunkDispatch<{
settings: SettingState;
}, undefined, UnknownAction> & Dispatch<UnknownAction>
import useAppDispatch
Средний