带有 () 的 javascript 箭头函数答案

【问题标题】：javascript arrow function with ()带有 () 的 javascript 箭头函数
【发布时间】：2018-06-13 03:37:13
【问题描述】：

如果函数体中没有返回关键字，我知道箭头函数会为我返回。但是我看到了这个

export default handleActions({
  [SET_LOADING]: (state, { payload }) => ({
    ...state, loading: payload
  })
})

这里的 ({}) 是什么？ {} 是一个对象，我如何查看负载或状态中的内容？我这样做了

export default handleActions({
  [SET_LOADING]: (state, { payload }) => {
     console.log(state) //not called
    return {...state, loading: payload}
  })
}

两者是一样的吗？

【问题讨论】：

是的，它们都是一样的。
如果console.log(state)没有被调用，这意味着函数(state, { payload }) => {根本没有被调用
无论如何我认为你在Action 和Reducer 之间搞砸了。你分享的上面的代码对我来说更像是一个减速器而不是一个动作
"什么是 ({})" - 在箭头中，您不能 () => {x:1, y:2} 您必须将返回的对象包装在 () ... 这是 documented here
@JaromandaX 这是一个有效的 redux-action 语法，控制台没有被记录但函数被调用，我可以保证。

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

如果你想使用箭头函数返回一个对象字面量，你必须将body包裹在()中

即

const first = (x, y) => x * y // Standard stuff
const second = (x, y) => {foo: x, bar: y} // Wrong!
const second = (x, y) => ({foo: x, bar: y}) // Correct, returning an object literal

请参阅Advanced syntax 文档部分。

【讨论】：

【解决方案2】：

function f({ name }){
	console.log(name);
}

let human = {name: 'a', age: 27}
f(human)

如上的简单演示。我们将为上面的函数 f 定义一个参数，该参数接受单个参数 object，该参数具有 name 属性。但是对于这种方法，我们只关心名字而不关心年龄。所以我们可以使用对象解构来只关注一个特定的属性

下面是不解构的方式，方便大家理解

function f(humanParam){
    	console.log(humanParam.name);
    }

    let human = {name: 'a', age: 27}
    f(human)

【讨论】：