Question

在React中，以下哪种方法是定义操作类型的最佳方法？

第一种方式：

使用如下字符串定义动作：

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

第二种方式：

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

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

import actionTypes from './actionTypes';

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

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

Answer 1

我的使用方式。

文件夹结构

-动作 -操作 -类型 -减速器

// 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,
});

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帮助程序将返回一个对象，而不是单个动作，该对象内部具有多个动作（请求，成功，失败...）。

Answer 3

两者都是优选的。在小型应用程序中，第一种情况可能会更清洁一些。正如redux文档所说：

您不必在单独的文件中定义动作类型常量，或者甚至根本没有定义它们。对于小型项目，可能更容易仅将字符串文字用于操作类型。但是，有一些在较大的代码库中显式声明常量的好处。读减少样板，获取有关保留代码库的更多实用技巧干净。

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

在大型应用中，第二种情况更可取。因为可能有很多类型，所以您可以打错字。因此，如果将它们定义在一个地方然后在那个地方简单地使用，那就更好了。

Answer 4

这是一个基于意见的问题，但是将与项目的指定部分相关的所有const，类型和接口存储在单独的文件model.js或{{1中}}。从中获得的主要好处-除了有助于使代码更清洁外-还在于可重用性。

如果您决定使用 TypeScript 和constants.js或union types，则只使用保存操作类型的变量比编写要容易得多再次手动输入（也可以减少拼错动作类型名称的机会）。

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

Answer 5

实际上，我看到Brian Holt的新ReactJS课程正在谈论这一部分，他更喜欢在另一个文件中创建动作类型，并说它将对规模项目有用，您将所有动作类型都放在一个文件中， check how create actionCreators

更清晰易读

Answer 6

我正在通过将动作类型与相应的动作创建者功能进行分组来做到这一点：

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

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

6 个答案: