Reactjs React/Redux，使用mapDispatchToProps更新存储

几乎完成了一个辅助项目，最后要修复的是按钮不工作。
主要指的是指导，但出了问题

存储部分如下所示（有一个并行的数据库调用，因此会发出“砰”的一声，以防万一）：

有关组成部分：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import store, { addToCart } from '../store/store.js';
import { Navbar, Nav, NavItem, CardColumns, Card, Button } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';


//Navbar component
class App extends Component {

    ...

    render() {
        if (!this.props.products.length){
            return <div> Loading... </div>
        }
        return (
            ...
                    <Navbar.Collapse>
                        <Nav> 
                            <LinkContainer to="/cart">
                                <NavItem>{this.props.total}</NavItem>
                            </LinkContainer>
                            ...
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                    <CardColumns>
                    {
                        this.props.products.map( item => { return <PizzaTable pizzas={item} key={item.id}/> }) 
                    }       
                    </CardColumns>
            </div>
        );
    }
}


//Cart component
class PizzaTable extends Component{
    handleCart = (e) =>{
        addToCart(e.target.id);
    }

    render(){
        return(
            <Card>
                ...
                <Button id={this.props.pizzas.price} onClick={this.handleCart}>{this.props.pizzas.price}</Button>
            </Card>
        );
    }
}

const mapStateToProps = state => ({
    ...
    total: state.total
})

export default connect(mapStateToProps, {addToCart})(App);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../store/store.js”导入存储，{addToCart}；
从“react bootstrap”导入{Navbar、Nav、NavItem、CardColumns、Card、Button}；
从“react router bootstrap”导入{LinkContainer}；
//导航栏组件
类应用程序扩展组件{
...
render（）{
if（！this.props.products.length）{
返回加载。。。
}
返回(
...
{this.props.total}
...
{
this.props.products.map（项=>{return}）
}       
);
}
}
//购物车组件
类PizzaTable扩展组件{
handleCart=（e）=>{
addToCart（例如target.id）；
}
render（）{
返回(
...
{这个.道具.披萨.价格}
);
}
}
常量mapStateToProps=状态=>({
...
总数：state.total
})
导出默认连接（MapStateTops，{addToCart}）（应用程序）；

试图将所有不相关的代码保持在最低限度，数据库获取和呈现工作正常

addToCart函数在全局范围内可用，因此直接使用它，而不作为道具或绑定传递

这应该如何工作：

• 单击按钮后，handleCart被激活
• 它接受e.target.id（一个数字值，console.logged）并将其传递给addToCart
• addToCart然后使用mapDispatchToProps的速记，调用操作，其中e.target.id是有效负载
• Reducer将e.target.id添加到total并更新NavItem中的视图

然而，在mapDispatchToProps区域的某个地方，正在传递的值正在丢失——将addToCart负载记录在存储中并没有显示任何内容。

---

可能是我使用dispatch不正确，或者忘记打电话或返回一些明显的信息。

PizzaTable

未连接到您的redux商店。看起来您将其

addToCart

操作创建者错误地连接到了

应用程序

//Cart component
class PizzaTable extends Component{
  handleCart = (e) =>{
    addToCart(e.target.id);
  }

  render(){
    return(
      <Card>
        ...
        <Button
          id={this.props.pizzas.price}
          onClick={this.handleCart}
        >
          {this.props.pizzas.price}
        </Button>
      </Card>
    );
  }
}

const ConnectedPizzaTable = connect(null, { addToCart })(PizzaTable);

看起来不像
PizzaTable
已连接到您的redux商店<但是，代码>应用程序是，但没有一个带有onClick处理程序的“addToCart”按钮。连接中的
{addToCart}
应该不是必需的，而是尝试
this.props.dispatch（addToCart（e.target.id））
不要搞错，应用程序是接收所有道具和传入数据库信息的父组件，然后，据推测，会将其传递给儿童比萨饼桌。所以我必须将每个子组件连接到存储。。。明白了，谢谢@VladFedorov是的，另一种选择是“prop drilling”，这实际上就是react redux的问题，通过实现，react context API解决了这个问题。
//Cart component
class PizzaTable extends Component{
  handleCart = (e) =>{
    addToCart(e.target.id);
  }

  render(){
    return(
      <Card>
        ...
        <Button
          id={this.props.pizzas.price}
          onClick={this.handleCart}
        >
          {this.props.pizzas.price}
        </Button>
      </Card>
    );
  }
}

const ConnectedPizzaTable = connect(null, { addToCart })(PizzaTable);

<CardColumns>
  {
    this.props.products.map(item => (
      <ConnectedPizzaTable pizzas={item} key={item.id}/>
    ) 
  }       
</CardColumns>

...

export default connect(mapStateToProps)(App);