如何使用Typescript构建react redux reducer来处理不同类型的有效载荷

Question

所以，我正在尝试用react、redux和typescript构建一个Todo应用程序。将会有一些todo页面，每个页面都将涉及todo。

以下是必要的类型和Todos状态。

export type Todo = {
name: string;
due: Date;
color: string;
pageId: string;
};
export type TodosByPageId = {
[page: string]: Todo[];
}
export type TodosState = {
byPageId: TodosByPageId;
curPageId: string;
};

在定义了我的常量和操作后，我导出了以下给定的减速器操作：

export type TodosAction = SetTodos | AddTodo | DeleteTodo | UpdateTodo | SetTodoPageId;

基本上

• AddTodo、DeleteTodo和UpdateTodo采用一个todo，而有效负载是一个todo
• SetTodos获取Todo[]，有效载荷为Todo[]
• SetTodoPageId采用字符串，有效负载为字符串

然后我开始定义todosReducer:

const initalState: TodosState = {
byPageId: {},
curPageId: '',
}
const todosReducer = (state: TodosState, action: TodosAction): TodosState => {
switch(action.type) {
case Constants.ADD_TODO:
return state; // TODO
case Constants.DELETE_TODO:
return state; // TODO
case Constants.SET_TODOS:
return state; // TODO
case Constants.SET_TODO_PAGE_ID:
return { ...state, curPageId: action.payload };
case Constants.UPDATE_TODO:
return state; // TODO
default:
return state;
}
}

在我处理的线路上，SET_TODO_PAGE_ID给了我错误

Type 'string | Todo | Todo[]' is not assignable to type 'string'.
Type 'Todo' is not assignable to type 'string'.

这是有道理的。每种情况下的打字似乎都不正确，所以我想问，对于这类情况，什么是更好的设计？

顺便说一句，我知道redux工具包是建议的方法，但我只是想学习这两种风格。

Answer 1

我是Redux的维护人员。

正如您所指出的：这里的第一个答案是您应该使用Redux Toolkit。我们特别建议今天不要尝试手动编写减速器和操作。我们确实有一个"；Redux Fundamentals"；我们文档中的教程，展示了如何手工编写Redux代码，但仅，以便您理解基本机制。对于任何实际的应用程序，您应该使用RTK。

第二个观察结果是，不应该编写TS操作类型的联合——它们没有提供任何真正的好处，也没有真正代表代码的运行方式。

请按照我们的Redux TS快速入门文档页面中显示的方法进行操作。