3

在 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对象来浪费内存呢？有什么想法吗？

4

6 回答 6

4

我使用的方式。

文件夹结构

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

// 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,
});
于 2018-11-30T21:40:50.170 回答
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 帮助程序返回一个包含多个操作（请求、成功、失败...）的对象，而不是单个操作。

于 2018-11-30T22:07:00.000 回答
1

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

您不必在单独的文件中定义动作类型常量，甚至根本不需要定义它们。对于小型项目，将字符串文字用于操作类型可能更容易。但是，在较大的代码库中显式声明常量有一些好处。阅读 Reducing Boilerplate 以获得更多关于保持代码库清洁的实用技巧。

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

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

于 2018-11-30T21:39:31.940 回答
0

这是一个基于意见的问题，但是将与项目的指定部分相关的所有 const、类型和接口存储在一个名为model.jsor的单独文件中往往是一个更好的主意constants.js。它的主要好处——除了它有助于保持你的代码更干净——将是可重用性。

如果您决定使用TypeScript和union typesor discriminated unions，那么只使用保存动作类型的变量比手动编写它要容易得多（而且您将减少拼错动作类型名称的机会）。

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

于 2018-11-30T21:43:37.380 回答
0

实际上，我看到 Brian Holt 的新 ReactJS 课程正在谈论这部分，他更喜欢在另一个文件中创建动作类型，并说这对规模项目很有用，你在一个文件中拥有所有动作类型，这将更加清晰和可读，检查如何创建 actionCreators

于 2018-11-30T21:50:48.447 回答
0

我通过将动作类型与相应的动作创建函数分组来做到这一点：

// action type
const someActionType = 'distinct action type';
// action creator
const someActionCreator = optionalParam => ({type: someActionType, optionalParam})
于 2020-03-16T08:59:47.707 回答