Javascript Redux：Redux文档示例中奇怪的解构语法&x27；s连接方法？

我一直在查看，但我有点被导出操作（如add

addToCart

）所使用的奇怪语法所绊倒

首先使用es6导入导入

addToCart

，然后混淆的部分是如何通过解构访问它以传递到

connect

函数

如index.js所示，

addToCart

是一个创建闭包并返回函数的函数。所以我不知道如何使用解构来代替

addToCart（）

我尝试复制，但我得到一个错误，该操作应该返回一个普通对象

问题：

有人能解释一下去采购语法在这里做什么吗

ProductsContainer.js

import { addToCart } from '../actions';

...

class ProductsContainer extends Component {
  render() {
    const { products } = this.props
    return (
      <ProductsList title="Products">
        {products.map(product =>
          <ProductItem
            key={product.id}
            product={product}
            onAddToCartClicked={() => this.props.addToCart(product.id)} />
        )}
      </ProductsList>
    )
  }
}

...

export default connect(
  mapStateToProps,
  { addToCart }
)(ProductsContainer)

export function addToCart(productId) {
  return (dispatch, getState) => {
    if (getState().products.byId[productId].inventory > 0) {
      dispatch(addToCartUnsafe(productId))
    }
  }
}

function addToCartUnsafe(productId) {
  return {
    type: types.ADD_TO_CART,
    productId
  }
}

---

请在此查看一些背景信息：

但是这里发生的事情是，

react redux

的

connect

函数的第二个参数获取一个对象（或函数）。对于对象，键映射到函数-因此我们实际上只是创建一个新对象，它的键为

addToCart

，它引用了您导入的

addToCart

操作函数：

export default connect(
  mapStateToProps,
  { addToCart: addToCart }
)(ProductsContainer)

---

更新：导入的

addToCart

实际上是一个thunk（这是一个包装表达式以延迟其计算的函数（请参见），因此，

react redux

似乎能够以它们创建的对象的方式调用这些thunk（即

redux

操作），适当地传递给调度程序

在此处查看一些背景信息：

但是这里发生的事情是，

react redux

函数的

connect

的第二个参数获取一个对象（或函数）.对于对象，键映射到函数-因此我们实际上只是创建一个新对象，它的键为

addToCart

，它引用了您导入的

addToCart

操作函数：

export default connect(
  mapStateToProps,
  { addToCart: addToCart }
)(ProductsContainer)

---

更新：导入的

addToCart

实际上是一个thunk（这是一个包装表达式以延迟其计算的函数（请参见），因此，

react redux

似乎能够以它们创建的对象的方式调用这些thunk（即

redux

操作），适当地传递给

调度程序

连接调用中的{addToCart}是es6对{addToCart:addToCart}的缩写。因此，它是传递一个包含一个名为addToCart.或者如果您更喜欢obj.addToCart（）的方法的连接对象

es6中的{Foo}语法令人困惑，因为它用于两种不同的事情

const bar "bar";
const foo = { bar };

给出foo.bar==“bar”，其中

const foo = { bar: "bar" };
const { bar } = foo;

---

Gives bar==“bar”。

连接调用中的{addToCart}是es6对{addToCart:addToCart}的简写。因此，它向连接传递一个对象，该对象包含一个名为addToCart的方法。或者如果您更喜欢obj.addToCart（）

es6中的{Foo}语法令人困惑，因为它用于两种不同的事情

const bar "bar";
const foo = { bar };

给出foo.bar==“bar”，其中

const foo = { bar: "bar" };
const { bar } = foo;

---

Gives bar==“bar”。

我不知道我们在什么时候得到内部闭包。我习惯于这样的想法，你必须先调用包装器

var closure=addToCart（）

，然后它返回的是要添加到dispatchToProps

{addToCart:closure}的函数

我们基本上只是将回调传递给connect函数。但是，嗯，不确定“获取内部闭包”是什么意思

addToCart

是一个返回函数的函数。因此应该导入它，然后调用它，以便创建连接正在使用的回调。或者我认为是这样。一点问题都没有，希望更新会把事情弄清楚。另外，FWIW，这是我的React非常小的样板项目，它有一些非常好的起点Redux的point:Oh它看起来像是Sweeet我给它加了星！我不知道我们在什么时候得到内部闭包。我习惯于你必须首先调用包装器

var closure=addToCart（）

，然后它返回的是添加到dispatchToProps

{addToCart:closure}的函数

我们基本上只是将回调传递给connect函数。但是，嗯，不确定“获取内部闭包”是什么意思

addToCart

是一个返回函数的函数。因此应该导入它，然后调用它，以便创建连接正在使用的回调。或者我认为是这样。一点问题都没有，希望更新会把事情弄清楚。另外，FWIW，这是我的React非常小的样板项目，它有一些非常好的起点Redux的点评：哦，看起来是我主演的！