在React中，定义action类型的最佳方法是什么？

Question

在React中，下列哪种方式是定义action类型的最佳方式？

第一种方式：

使用类似以下字符串定义actions：

const actionCreatorExample = (value) => {
  return { type: 'SET_RESPONSE', value };
}

第二种方法：

在一个对象中定义action类型，并通过访问该对象的值来引用action类型。像这样：

export const actionTypes = {
  SET_RESPONSE: 'SET_RESPONSE'
};

import actionTypes from './actionTypes';

const actionCreatorExample = (value) => {
  return { type: actionTypes.SET_RESPONSE, value };
}

第二种方式看起来很整洁，但是为什么要浪费内存来存储 actionTypes 对象呢？有什么想法吗？

- loveTrumpsHate

Answer 1

我使用的方法。

文件夹结构

-- actions（操作） -- operations（运行） -- types（类型） -- reducers（减速器）

// types
const IS_MOBILE = 'root/IS_MOBILE';
const SCROLL_POS = 'root/SCROLL_POS';
const OPEN_MENU = 'root/OPEN_MENU';

export {
  IS_MOBILE,
  SCROLL_POS,
  OPEN_MENU,
};

// actions

export const getResolution = boolean => ({
  type: actionType.IS_MOBILE,
  payload: boolean,
});

export const getScrollPos = () => ({
 type: actionType.SCROLL_POS,
 payload: window.pageYOffset || document.documentElement.scrollTop,
});


export const stateMenu = boolean => ({
  type: actionType.OPEN_MENU,
  payload: boolean,
});

- Fernando Colom

---

我有4个文件夹，每个文件夹用于不同的目的。其中一个用于存放操作（actions），另一个用于存放类型（types），还有一个用于存放减速器（reducers）和操作（operations），以便更好地扩展。 - Fernando Colom

你将导出的函数宽泛地标记为“actions”，但实际上它们是action creators，因为每个函数的调用都会返回一个action。 - daGo

Answer 2

我不会说这是“最好的方式”，但这是我处理它的方法。 我有一个帮助函数可以帮助我构建我的操作，就像这样:

const action = (type, payload = {}) => ({ type, payload });

export default function buildSimpleAction(baseName) {
  return {
    actionType: baseName,
    actionCreator: args => action(baseName, { ...args })
  };
}

我将它们声明为：

import buildSimpleAction from 'redux/buildSimpleAction';

export const { actionType: DISTINCT_ID, actionCreator: setDistinctId } = buildSimpleAction('DISTINCT_ID');

最后，我可以像这样使用它们：

import { DISTINCT_ID, setDistinctId } from 'redux/actions'

使用辅助函数创建简单操作可能看起来很复杂，但我有其他类型的操作并不是“简单”的，例如API调用。API辅助程序返回的不是单个操作，而是一个包含多个操作的对象（请求、成功、失败等）。

- jorbuedo

Answer 3

两种方法都可取。第一种情况在小应用程序中可能会更加简洁。正如Redux文档所说：

“您不必在单独的文件中定义操作类型常量，甚至无需定义它们。对于小型项目，仅使用字符串字面值作为操作类型可能更容易。但是，在较大的代码库中明确声明常量有一些好处。阅读《减少样板》获取有关保持代码库清洁的更多实用提示。”

https://redux.js.org/basics/actions

在大型应用程序中，第二种情况更可取。因为可能有很多类型，而且你可能会犯错。因此最好将它们定义在一个地方，然后从那个地方简单地使用。

- user9813762

---

文档链接？ - loveTrumpsHate

Answer 4

这是一个基于个人观点的问题，但是将所有与项目特定部分相关的常量、类型和接口存储在一个名为model.js或constants.js的单独文件中会更好。除了有助于保持代码整洁外，它的主要优点是可重用性。

如果您决定使用TypeScript和联合类型或辨别联合，那么只需使用保存操作类型的变量就比手动编写操作类型名称容易得多（还可以减少拼写错误的机会）。

总结一下-我会投票支持第二种方法。这也是我在每个项目中都这样做的方式。

- kind user

Answer 5

其实，我看到了 Brian Holt 的新 ReactJS 课程，他谈到了这一部分，并且更喜欢在另一个文件中创建操作类型，并表示这对于规模较大的项目会很有用。如果您将所有操作类型放在一个文件中，那么它将更清晰易读。查看如何创建 actionCreators。

- Moumen Soliman

Answer 6

我是通过将操作类型与相应的操作创建函数分组来完成的：

// action type
const someActionType = 'distinct action type';
// action creator
const someActionCreator = optionalParam => ({type: someActionType, optionalParam})

- daGo