Изменение State с использованием Redux Toolkit

Question

Изменение State с использованием Redux Toolkit

Рейтинг: 0Ответов: 1Опубликовано: 14.07.2023

Я только вчера начал изучать Redux Toolkit и щас вообще не понимаю, почему мне приходится менять state языка вот так <button onClick={() => changeLanguage({language:"Rus"})}>Rus</button>, а не этак <button onClick={() => changeLanguage("Rus")}>Rus</button> При попытке сделать так: <button onClick={() => changeLanguage("Rus")}>Rus</button> мне выдаётся ошибка: A case reducer on a non-draftable value must not return undefined

Store

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import languageSlice from "./language/language.slice";
import ThemeSlice from "./theme/Theme.slice";


const reducers = combineReducers({
    lang:languageSlice,
    theme:ThemeSlice,
});

export const Store = configureStore({
    reducer:reducers,
});

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

useDispatch

import { useMemo } from "react";
import { bindActionCreators } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import { changeLanguage } from "../store/language/language.slice";
import { changeTheme } from "../store/theme/Theme.slice";

const rootActions = {changeLanguage,changeTheme}

export default function useActions(){
    const dispatch = useDispatch();
    return useMemo(() => bindActionCreators(rootActions, dispatch),[dispatch]);
}

languageSlice без интерфейса эта хрень никак не работала. Типы не помогали.

import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { LanguageType } from "../../types/GlobalTypes";

interface langInterface {language:"Rus" | "Eng"}

const initialState: langInterface = {language:"Rus"};

export const languageSlice = createSlice({
    name: "language",
    initialState,
    reducers: {
        changeLanguage: (state:langInterface, {payload: newLanguage} : PayloadAction<langInterface>) => {
            state.language = newLanguage.language;
            console.log(state.language);
        }
    },
});

export const { changeLanguage } = languageSlice.actions;
export default languageSlice.reducer;

Language

import { useActions } from "../../../hooks/MyHooks";
import StructureImage from "../../structures/StructureImage";

export default function Language(){
    const { changeLanguage } = useActions();

    return(
        <div className="language">
            <StructureImage width="36px" height="36px" SRC="/svgs/Language.svg" ALT="language" />
            <button onClick={() => changeLanguage({language:"Rus"})}>Rus</button>
            <button onClick={() => changeLanguage({language:"Eng"})}>Eng</button>
        </div>
    )
}

typescript redux

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Потому-что у вас такая логика.

interface langInterface {language:"Rus" | "Eng"}

здесь у вас описан интерфейс, интерфейс это по сути объект. И вы ожидаете объект в котором есть ключ language и значение "Rus", "Eng".

В вашем слайсе:

changeLanguage: (state:langInterface, {payload: newLanguage} : PayloadAction<langInterface>) => {
  state.language = newLanguage.language;
  console.log(state.language);
}

Вы из payload (который переименован в newLanguage) который является объектом, вытаскиваете значение по ключу language.

Решение?
Нам нужно заменить интерфейс langInterface на тип аля type langType = "Rus" | "Eng";, его же мы подставим в наш PayloadAction:

changeLanguage: (state:langInterface, {payload: language} : PayloadAction<langType>) => {
  state.language = language;
  console.log(state.language);
}

Вы так же можете не использовать переименования payload на language и использовать его напрямую state.language = payload.

Изменение State с использованием Redux Toolkit

Ответы