Question

我正在调用方法this.props.addItemToCart(elem.id)，以便向redux商店添加id值，但它无效。没有添加任何值。这是一个link to container reducer and an action_creator code.
小摘要，与我在这里展示的问题有关：

   ...
  <Button onClick={() => this.props.addItemToCart(elem.id)}>
              Add to Cart
  </Button>

...

const mapDispatchToProps = (dispatch) => ({
  getAPIData() {
    dispatch(....,
  addItemToCart(value) {
    dispatch(addToCart(value));
  },
  removeItemFromCart(value) {
    dispatch(removeFromCart(value));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

以下是reducer代码的一部分：

const handleCart = (state = initialState.addedIds, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      if (state.indexOf(action.productId) !== -1) {
        return state
      }
      return [...state, action.productId];
    case REMOVE_FROM_CART:
      return state.filter(productId => action.productId !== productId);
    default:
      return state
  }

};

Answer 1

您的操作创建者不会在操作上创建productId属性，因此始终为undefined。

  if (state.indexOf(action.productId) !== -1) {

阅读您自己的代码（您没有在问题中包含这些代码）。您将产品ID值放在action.payload中。因此，请尝试相应地更改reducer代码。

  if (state.indexOf(action.payload) !== -1) {

Answer 2

您撰写mapDispatchToProps的方式是错误的。它应该是这样的。

function mapDispatchToProps(dispatch) {
    return {
        addItemToCart: bindActionCreators(addToCart, dispatch),
        // Other actions should go here ...
    };
}

然后它会将你的动作绑定到道具，因此可以使用

调用动作

this.props.addItemToCart(values);

最后将它传递给这样的连接助手。

export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

希望这会有所帮助。快乐的编码！

Redux mapDispatchToProps方法无法正常工作

2 个答案: