Question

我对打字稿还很陌生，我希望有人可以帮助我进行此打字稿的转换。我已经对打字稿做了很多工作，但我从未真正接触过TS的减速器。

这就是我正在使用的：

export default function reducer(state, action) {
  switch (action.type) {
    case "ADD_TODO":
      // return current state if empty
      if (!action.payload) {
        return state;
      }
      // return current state if duplicate
      if (state.includes(action.payload)) {
        return state;
      }
      return [
        ...state,
        {
          id: Math.floor(Math.random() * 999999),
          title: action.payload,
          completed: false
        }
      ];
    case "EDIT_TODO":
      return state.map(todo => {
        return todo.id === action.payload.id ? action.payload : todo;
      });
    case "DELETE_TODO":
      return state.filter(todo => todo.id !== action.payload);
    case "COMPLETE_TODO":
      return state.map(todo =>
        todo.id === action.payload```
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
}

Answer 1

首先定义todo对象，state和action的接口。

这是一个起点，可能会出现一些语法错误，一些由于打字稿类型需要更改而引起的错误，但在reducer代码中还会出现一些bug，这些bug会突出显示，因此也需要修复。

type Todo = {
    id: number,
    title: string
    completed: boolean,
}

type Action = {
    type: "ADD_TODO" | "EDIT_TODO" | "DELETE_TODO" | "COMPLETE_TODO",
    payload: Todo,
}

type State = Todo[]

您还可以进一步将操作字符串定义为常量，以便在switch语句和操作类型定义中使用相同的变量。

Redux还带有action: PayloadAction<number>之类的帮助程序，它们会自动为您输入一些内容，取决于您编写减速器的方式，您是否会成功。

从此处获取更多信息：https://redux.js.org/recipes/usage-with-typescript

将React Reducer转换为打字稿

1 个答案: