为什么将 Redux 动作创建者返回的动作括在括号中？

Question

我正在尝试理解 Redux 的 todos 示例 (https://redux.js.org/introduction/examples#todos)，其中包含以下 actions/index.js：

let nextTodoId = 0
export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

export const setVisibilityFilter = filter => ({
  type: 'SET_VISIBILITY_FILTER',
  filter
})

export const toggleTodo = id => ({
  type: 'TOGGLE_TODO',
  id
})

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

我并不完全清楚为什么 addTodo、setVisibilityFilter 和 toggleTodo 返回的对象包含在圆括号中，例如 ({...})，而不仅仅是大括号 {...}？

我在http://jamesknelson.com/javascript-return-parenthesis/ 之类的地方读到，方括号对于防止 Javascript 过早插入分号很有用，但是打开的花括号不会也阻止插入分号吗？

Answer 1

动作创建者是函数。函数体用花括号括起来。通过省略通常围绕函数体的花括号，箭头函数允许您立即返回，而不是使用 return 关键字。但是，对象也被花括号包围。如果省略括号，箭头函数认为它是打开和关闭函数，而不是返回一个对象。

它相信：

const myActionCreator = (value) => {
  type: 'MY_ACTION',
  value
};

意思：

const myActionCreator = function(value) {
  type: 'MY_ACTION',
  value
};

代替：

const myActionCreator = function(value) {
  return {
    type: 'MY_ACTION',
    value
  };
};

要解决此问题，您可以在花括号周围加上括号。现在箭头函数知道它正在返回括号内的内容，而不是打开函数体。在括号内——你的对象。

这适用于所有箭头函数，不仅仅是 redux。

Answer 2

这些函数是 ecmascript-6 的箭头函数，如果你想返回一个对象，你必须使用 ({..})。如果您不使用括号而只使用花括号的函数，则会看到类似函数块并且无法在此处按预期返回对象。

const foo = () => bar;

实际上是

的简写

const foo = () => { return bar };

如您所见，我们可以跳过{} 和return 部分作为我们的速记。我们不需要在速记中使用return，但是如果我们使用花括号作为一个块，我们必须使用return 来通知我们的函数“这是我的回报”。

那么简而言之，如果我们想返回一个对象怎么办？

const foo = () => { object values };

那么我们的函数需要在这里返回，它也将花括号看作一个函数块，然后我们就松开了我们的对象。

这就是为什么我们将函数体括起来以在速记方法中返回一个对象。

const foo = () => ({ object values });