redux中常数的意义是什么?


72

例如从此示例:

export const ADD_TODO = 'ADD_TODO'
export const DELETE_TODO = 'DELETE_TODO'
export const EDIT_TODO = 'EDIT_TODO'
export const COMPLETE_TODO = 'COMPLETE_TODO'
export const COMPLETE_ALL = 'COMPLETE_ALL'
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'

这不像您要保存字符。变量名称与字符串完全相同,并且永远不会更改。如果您有一天要做类似的事情,我会理解为常量:

ADD_TODO = 'CREATE_TODO'

但这永远不会发生。那么这些常数有什么作用?


5
@charlietfl,但没有理由甚至更改名称。什么时候或为什么要更改ADD_TODO?
m0meni

3
如果名称已更改,那么将常量的名称与存储在其中的字符串保持不同可能不太好。
lakesare'6

1
不是您问题的直接答案,但是您可以使用redux-define
Mr5o1'1

Answers:


62

我想引用Reddan的作者@dan_abramov,他对类似的Github问题发表了评论。

为什么这有好处?通常认为常量是不必要的,对于小型项目,这可能是正确的。对于较大的项目,将操作类型定义为常量有一些好处:

  • 因为所有动作类型都集中在一个地方,所以有助于保持命名的一致性。

  • 有时,您希望在使用新功能之前先查看所有现有操作。团队中的某人可能已经添加了您需要的操作,但是您不知道。

  • 在“拉取请求”中添加,删除和更改的操作类型列表可帮助团队中的每个人跟踪范围和新功能的实现。

  • 如果在导入动作常量时输入错误,将无法定义。当您想知道为什么在分派动作时什么也没发生时,这比错字更容易注意到。

这是Github问题的链接


68

没错,这与保存字符无关,但是在代码缩小后,您可以节省一些空间。

在redux中,至少在两个地方使用这些常量-在化简器中以及在创建动作期间。因此在某个文件中一次定义一个常量非常方便,例如actionTypes.js

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const EDIT_TODO = 'EDIT_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const COMPLETE_ALL = 'COMPLETE_ALL';
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED';

然后在动作创建器文件中要求它,例如 actions.js

import { ADD_TODO } from './actionTypes';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

并在一些减速器

import { ADD_TODO } from './actionTypes';

export default (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ];
    default:
      return state
  }
};

它使您可以轻松地在整个项目中查找该常量的所有用法(如果使用的是IDE)。它还可以防止您引入由错别字引起的愚蠢错误,在这种情况下,您会ReferenceError立即得到解决。


1
<3谢谢!这是一个很好的解释。一个建议是,提及/总结有关调试的最后一点,并ReferenceError在开始时立即指出要点。
Riveascore

5
我知道了,但是我觉得这很麻烦,我从来没有真正去做过,因为我认为这太样了。
Vlady Veselinov

6

这在其他语言中更有用,但在JavaScript中也有用。例如,如果我"ADD_TODO"在整个代码中使用而不是ADD_TODO,那么如果我在键入任何字符串时输入错误,则if (action === 'ADD_TODOz')在执行该代码时,如果代码是类似,则会做错事情。但是,如果您错误输入const名称,则在该行尝试执行时if (action === ADD_TODOz)会得到类似“ som”的字样,ReferenceError: ADD_TODOz is not defined因为这ADD_TODOz是无效的引用。而且,当然,使用静态语言,您会在“编译时”出错。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.