javascript - 为什么我应该使用导出的常量设置 redux 操作类型？

Question

我正在尝试学习与 redux 的 react ，我已经阅读了 redux 的主要文档，我们应该将操作类型存储到一个 js 文件中，然后导出所有常量并将它们用于类型，例如它是简单模式:

export function itemsAction(items) {
    return {
        type: 'ITEMS',
        data: items
    }
}

但显然我应该采用这种格式:

import { types } from './Types';

export function itemsAction(items) {
    return {
        type: types.ITEMS,
        data: items
    }
}

但是这个技巧的主要好处是什么？ Action 是固定的，永远不会改变，为什么我应该从变量设置 Action 类型并导入所有类型？

谢谢

Answer 1

因为很高兴知道您使用的是对象属性而不是原始字符串，因为原始字符串很容易出现拼写错误。举个例子:

export function itemsAction(items) {
    return {
        type: 'ITEMS',
        data: items
    }
}

现在假设我有一个 reducer 来处理同样使用原始字符串的操作:

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ITESM':
      return state.map(item => item.something = "potato")
    default:
      return state
  }
}

在 reducer 中，我拼错了它的 case 的 Action 类型。但是由于 Javascript 和 Redux 的工作方式，它不会在您的 IDE linting 中作为错误被注意到，也不会在您执行代码时产生任何错误。您将发送操作，它会默默地失败。什么都不会发生，没有行动，没有错误，什么都没有。这可能很难调试。

另外，如果你想改变一个 Action 的名字怎么办。最好只是更改对象中的值，而不是在整个项目中进行大量查找和替换，希望您不会覆盖在此过程中不希望覆盖的内容。

此外，将所有 Action 类型放在一个地方真是太好了，这样您就可以浏览并查看可用的内容，而不是查看所有 Action 文件。一旦您的项目发展壮大，您会很高兴自己做到了。

此外，在 Typescript 上它特别有用，因为如果您尝试使用您尚未定义的操作，它甚至不会构建，因此您可以获得一些构建时间安全性。