React/Redux，使用 mapDispatchToProps 更新存储

Question

几乎完成了一个副项目，最后要修复的是按钮不起作用。
主要是参考this article 寻求指导，但出了点问题。

Store 部分看起来像这样（有一个并行进行的数据库调用，因此会出现 thunk，以防您想知道）：

const initState = {
    ...
    total: 100
}

//actions
...
export const addToCart = sum => ({
    type: 'ADD_CART',
    payload: sum
})

//reducers
const reduceProducts = (state = initState, action) => {
    switch(action.type){
        ...
        case 'ADD_CART':
            return {
                total: state.total + action.payload
            };
        default:
            return state;
    }
}

...

//store
const store = createStore(
    reduceProducts, 
    applyMiddleware(thunk)
);

export default store;

有问题的组件：

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);

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

addToCart 函数在全局范围内可用，因此直接使用它，无需作为 prop 或绑定传递。

这应该如何工作：

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

然而，在 mapDispatchToProps 区域的某个地方，正在传递的值正在丢失 - 将 addToCart 有效负载记录到存储中不会显示任何内容。 要么是我使用了错误的 dispatch，要么是忘记调用或返回一些明显的东西。

Answer 1

PizzaTable 未连接到您的 redux 存储。看起来您错误地将其 addToCart 动作创建者连接到了 App。

//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);

在App 中，使用connected Pizza table 组件，并从其connect HOC 中移除addToCart。

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

...

export default connect(mapStateToProps)(App);