Javascript 未使用Redux从数组中删除项

我在学习Redux的教程。我的第一个动作正常工作，这是一个简单的GETAPI调用，但我仍在尝试创建下一个动作。代码如下所示：

在组件中：

class ShoppingList extends Component {
  componentDidMount() {
    this.props.getItems();
  }

  handleClick = id => {
    console.log("component " + id);
    this.props.deleteItem(id);
  };

  render() {
    const { items } = this.props.item;

    return (
      <Container>
        <ListGroup>
          <TransitionGroup className="shoppingList">
            {items.map(({ id, name }) => (
              <CSSTransition key={id} timeout={500} classNames="fade">
                <ListGroupItem>
                  <Button
                    className="button1"
                    color="danger"
                    size="sm"
                    onClick={e => this.handleClick(id, e)}
                  >
                    &times;
                  </Button>
                  {name}
                </ListGroupItem>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </ListGroup>
      </Container>
    );
  }
}

ShoppingList.propTypes = {
  getItems: PropTypes.func.isRequired,
  item: PropTypes.object.isRequired,
  deleteItem: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  item: state.item
});

export default connect(mapStateToProps, { getItems, deleteItem })(ShoppingList);

在我的操作文件中：

export const getItems = () => {
  return {
    type: GET_ITEMS
  };
};

export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    payload: id
  };
};

---

然而，当我点击按钮试图从列表中删除一个项目时，什么也没有发生。我可以在Redux控制台中看到操作正在被调度，但是它似乎没有效果。有什么建议吗？

您在

deleteItem

操作

{type，payload}

中有什么建议。相反，您可以在reducer return语句中使用

{type，id}

或

有效负载

我将执行以下操作-因此您使用

操作传递
id
，而不是
有效负载
：

export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    id
  };
};

或者是以后的最佳选择-保留
有效负载
只是添加
id
作为属性：

// action
export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    payload: { id }
  };
};

// reducer
case DELETE_ITEM:
   // here destructuring the property from payload
   const { id } = action.payload;
   return {
      ...state,
      items: state.items.filter(item => item.id !== id)
   };

我希望这有帮助

// action
export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    payload: { id }
  };
};

// reducer
case DELETE_ITEM:
   // here destructuring the property from payload
   const { id } = action.payload;
   return {
      ...state,
      items: state.items.filter(item => item.id !== id)
   };