首页 文章

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

提问于
浏览 次
1

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

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

我创建了一个union Action 类型，然后在reducer函数中，我正在使用 switch 根据action的 type 属性决定返回什么状态 . 在switch语句的每个case中，我正在访问 action 参数的不同属性 .

我没有't understand why Flow is telling me it can'在 action 参数上找到某些属性 . 一切似乎都被正确定义，我真的看不出任何错误 .

这是我的测试用例：

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

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

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

redux flowtype

1 回答

  • 0

    首先，请注意您的 reduce 函数不是有效的reducer . redux减速器必须具有以下特征

    (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仓库中找到流式应用程序的示例（请参阅examples / todos-flow）

    回复于

相关问题