所以，我正在嘗試用 react、redux 和 typescript 構建一個 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 工具包是建議的方式，但我只是想學習這兩種風格。
uj5u.com熱心網友回復：
我是 Redux 的維護者。
正如您所指出的：這里的第一個答案是您應該使用 Redux Toolkit。我們今天特別建議不要嘗試手動撰寫 reducer 和 action。我們的檔案中確實有一個“Redux Fundamentals”教程，展示了如何手寫 Redux 代碼，但只是為了讓您了解基本機制。對于任何實際應用程式，您都應該使用 RTK。
第二個觀察是你不應該撰寫 TS 動作型別聯合——它們沒有提供任何真正的好處，也沒有真正代表代碼的運行方式。
請改用我們的 Redux TS 快速入門檔案頁面中顯示的方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/419262.html
標籤：