英文:
How to fix Types of parameters 'action' and 'action' are incompatible
问题
这似乎是一个常见的问题，但我仍然不明白为什么会出现这个错误？
我升级了 redux，现在我得到了这个错误：
TS2322: 类型 '(state: ILanguage | undefined, action: PayloadAction<ILanguage>) => ILanguage' 无法分配给类型 'Reducer<ILanguage, AnyAction>'。
参数'type'和'action'的类型不兼容。
在类型 'AnyAction' 中，属性 'payload' 在类型 '{ payload: ILanguage; type: string; }' 中是必需的，但缺少。
> 63 | language: LanguageReducer,
| ^^^^^^^^
64 | },
65 | });
这是我的 reducer：
import { PayloadAction } from "@reduxjs/toolkit";
type ILanguage = {
isEnglish: boolean;
};
const initialState: ILanguage = {
isEnglish: true,
};
export const reducer = (state: ILanguage = initialState, action: PayloadAction<ILanguage>): ILanguage => {
switch (action.type) {
case LanguageActionType.SET_LANGUAGE: {
const isEnglish = action?.payload?.isEnglish || true;
return {
...state,
isEnglish,
};
}
case LanguageActionType.RESET_STATE: {
return { ...initialState };
}
default:
return state;
}
};
这是我的 action：
import { PayloadAction } from "@reduxjs/toolkit";
export const actionCreators = {
resetState: () => ({
type: LanguageActionType.RESET_STATE,
}),
setLanguage: (isEnglish: boolean): PayloadAction<ILanguage> => ({
payload: { isEnglish },
type: LanguageActionType.SET_LANGUAGE,
}),
我可以通过修改这一行来抑制错误，基本上添加 | AnyAction：
export const reducer = (state: ILanguage = initialState, action: PayloadAction<ILanguage> | AnyAction): ILanguage => {
但我想了解问题出在哪里。
英文:
This seems like it is a common problem, but I still don't get it why am I getting this error?
I updated redux and now I get this error:
TS2322: Type '(state: ILanguage | undefined, action: PayloadAction<ILanguage>) => ILanguage' is not assignable to type 'Reducer<ILanguage, AnyAction>'.
Types of parameters 'action' and 'action' are incompatible.
Property 'payload' is missing in type 'AnyAction' but required in type '{ payload: ILanguage; type: string; }'.
> 63 | language: LanguageReducer,
| ^^^^^^^^
64 | },
65 | });
This is my reducer
import { PayloadAction } from "@reduxjs/toolkit";
type ILanguage = {
isEnglish: boolean;
};
const initialState: ILanguage = {
isEnglish: true,
};
export const reducer = (state: ILanguage = initialState, action: PayloadAction<ILanguage>): ILanguage => {
switch (action.type) {
case LanguageActionType.SET_LANGUAGE: {
const isEnglish = action?.payload?.isEnglish || true;
return {
...state,
isEnglish,
};
}
case LanguageActionType.RESET_STATE: {
return { ...initialState };
}
default:
return state;
}
};
This is my action:
import { PayloadAction } from "@reduxjs/toolkit";
export const actionCreators = {
resetState: () => ({
type: LanguageActionType.RESET_STATE,
}),
setLanguage: (isEnglish: boolean) : PayloadAction<ILanguage> => ({
payload: { isEnglish },
type: LanguageActionType.SET_LANGUAGE,
}),
I could suppress the error by modifying this line, basically adding | AnyAction:
export const reducer = (state: ILanguage = initialState, action: PayloadAction<ILanguage> | AnyAction): ILanguage => {
But I want to understand where the problem lies.
答案1
得分: 0
在你的reducer中，你已将action参数定义为类型为PayloadAction<ILanguage>的action，这意味着它期望一个具有类型为ILanguage的payload属性的action。然而，Redux Toolkit中的Reducer类型期望继承自AnyAction的actions，后者的payload属性是可选的，因此在这里存在冲突。
在为你的action指定类型时，使用...| AnyAction的类型可以正常工作，因为该action可以是AnyAction类型，然后被视为AnyAction。
请查看在TypeScript中使用createSlice的用法。
createSlice会为你创建actions和reducer，你不必担心类型安全性问题。动作类型可以直接内联提供。
英文:
In your reducer, you have defined the action parameter as action of type PayloadAction<ILanguage>, which means it expects an action with a payload property of type ILanguage, however, the Reducer type from Redux Toolkit expects actions that inherit from the AnyAction this latter its property payload is optional so here is the conflict.<br>
>Property 'payload' is missing in type 'AnyAction' but required in type '{ payload: ILanguage; type: string; }'
when you give ...| AnyAction as type for your action it works because the action can be of type AnyAction and then treated as AnyAction
have a look at createslice usage with TypeScript
>createSlice creates your actions as well as your reducer for you, you don't have to worry about type safety here. Action types can just be provided inline
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论