javascript - Redux:Redux 文档示例的 connect 方法中存在奇怪的解构语法？

Question

我一直在查看 redux github examples我对导出诸如 add addToCart 之类的操作所使用的奇怪语法感到有点困惑。

首先 addToCart 是使用 es6 导入来导入的，然后令人困惑的部分是如何通过解构来访问它以传递给 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)

index.js

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

Answer 1

看一下这里的一些背景:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

但这里发生的情况是，react-redux 的 connect 函数的第二个参数采用一个对象(或函数)。对于对象来说，键映射到函数 - 所以我们实际上只是创建一个新对象，它有一个键 addToCart，它引用 addToCart > 您导入的 Action 函数:

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

更新:addToCart导入实际上是一个thunk(这是一个包装表达式以延迟其求值的函数(参见 https://github.com/gaearon/redux-thunk#whats-a-thunk )因此，它看起来react-redux 能够以它们创建的对象(即 redux 操作)适本地传递给 dispatcher 的方式调用这些 thunk >.