为 Redux 操作定义类型的正确方法是什么？答案

【问题标题】：What is the correct way to define types for Redux actions?为 Redux 操作定义类型的正确方法是什么？
【发布时间】：2016-10-13 02:23:26
【问题描述】：

我有一个使用 Redux 进行状态管理的应用程序，我正在尝试添加 Flow 类型注释。

我在这里创建了一个非常简单的测试用例，概述了我遇到的问题。

我创建了一个联合 Action 类型，然后在 reducer 函数中，我使用 switch 根据操作的 type 属性来决定返回什么状态。在 switch 语句的每种情况下，我都在访问 action 参数的不同属性。

我不明白为什么 Flow 告诉我它在 action 参数上找不到某些属性。一切似乎都被正确定义了，我真的看不出这里有什么问题。

这是我的测试用例：

https://flowtype.org/try/#0C4TwDgpgBAggxsAlgewHZQLxQFBSgHygG8pRIAuKAcgDEBJAJQGUAVKgGigBMBDYHygHkARgCsICKAF9cBYqXARKVJgFEAwoIByAEQ5REwCAFs6XSgGdgAJ0SoA5tOzYy0JvyOZisgDaIrlDDW1jwgADwi4ggAfOzYMtgAZgCuqAgo6NYQXMlwEAAUVnxKUO7FnDzpaIFVqACUlKjJxsIQ1t54FgDuhnAAFlD5lUhoAHSudR14UHA8FtC0jKxUlESy01BZwMnW6EVGo35Wo4l2XHSoXBAAHvmGJpjRBkbGo4hcmBhYwxmjvPxvLh1ADc6ycG1m82oak0uhWUw2Wx2ew8EEO-mAJzOFyut3uxkezxMgM+31qbxeZhBYJkGyuiR4yR8wHIYLwSN2UAADKC8DIpEA

我认为可能这个问题与使用switch 语句有关，所以这里有一个使用if 的版本，同样的问题：

https://flowtype.org/try/#0C4TwDgpgBAggxsAlgewHZQLxQFBSgHygG8pRIAuKAcgDEBJAJQGUAVKgGigBMBDYHygHkARgCsICKAF9cBYqXARKVJgFEAwoIByAEQ5REwCAFs6XSgGdgAJ0SoA5tOzYy0JvyOZisgDaIrlDDW1jwgADwi4ggAfOzYMtgAZgCuqAgo6NYQXMlwEAAUVnxKUO7FnDzpaIFVqACUlKjJxsIQ1t54iIlQ+ZVIaAB0rpgYWLSMrFR1HXhQWcDJ1uhFRgN+VgOJdlx0qFwQAB75hiaY0QZGxgOIXCNYfRkDvPzXXHUA3LIyeLJdPQ+DYajMZqTS6KYzPDzRbLDwQNb+YCbba7fZHE7GM4XEyvO5QAGoa6XMwfL6yWTQpZQAAMnykQA

【问题讨论】：

不知道 flow 是做什么的，如果这确实是应该发送的动作，你的 reducer 看起来不错。 flow 是在这里以某种方式使用 redux 还是您只是在测试您认为 redux 正在做什么？
这两件事是分开的，我只是想在我的 Redux 动作和 reducer 中添加 Flow 类型的注解。
知道了。但不确定您对上次编辑的意思 - 为什么您认为这是一个错误？
呃，是的，你是对的，这不会是一个错误，我犯了一个错误。我会删除它。

标签： redux flowtype

【解决方案1】：

首先，请注意您的reduce 函数不是有效的reducer。 redux reducer 必须具有以下签名

(state: State, action: Action) => State

Flow 对改进持悲观态度（理论上您可以更改回调中的 action.data 引用）。帮助 Flow 保持优化的一种方法是使用 const 绑定 (docs)

function reduce(state: State, action: Action): number {
  switch (action.type) {
    case 'FIRST': 
      const data = action.data;
      return state.list.findIndex(item => item.id === data.id);
    case 'SECOND': 
      const itemId = action.itemId
      return state.list.findIndex(item => item.id === itemId);
    default:
      return 0;
  }
}

或者，IMO 更好，将案例拆分为几个辅助函数

function findIndex(state: State, id): number {
  return state.list.findIndex(item => item.id === id);
}

function reduce(state: State, action: Action): number {
  switch (action.type) {
    case 'FIRST': 
      return findIndex(state, action.data.id)
    case 'SECOND': 
      return findIndex(state, action.itemId)
    default:
      return 0;
  }
}

此外，您可以在 redux 存储库中找到流类型应用程序的示例（请参阅示例/todos-flow）

【讨论】：

如何使用常量而不是字符串？这是愚蠢的