Question

我一直在检查redux github examples并且我使用了一个奇怪的语法，例如添加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)

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的{{1}}函数的第二个参数采用对象（或函数）。在对象的情况下，键被映射到函数 - 所以我们实际上只是创建一个新对象，其具有connect的键，它引用了addToCart动作函数，你输入：

addToCart

更新：export default connect( mapStateToProps, { addToCart: addToCart } )(ProductsContainer)导入实际上是一个thunk（这是一个包装表达式以延迟其评估的函数（参见https://github.com/gaearon/redux-thunk#whats-a-thunk）因此，它似乎是addToCart能够以他们创建的对象（即react-redux个动作）被适当地传递给redux的方式调用这些thunk。

Answer 2

connect call中的{addToCart}是{addToCart：addToCart}的es6简写。所以它传递一个对象连接，它包含一个名为addToCart的方法。或者如果您更喜欢obj.addToCart（）。

es6中的{Foo}语法令人困惑，因为它用于两个不同的东西。

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

给foo.bar ===＆＃34; bar＆＃39;，where as，

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

给予条形码===＆＃34; bar＆＃34;。

Redux：Redux docs示例的connect方法中的奇怪解构语法？

2 个答案: