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关键字。但是，对象也被花括号包围。如果省略括号，则箭头函数会认为它是 opening 和 closesing 函数，而不是返回对象。

它相信：

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

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

2 个答案: