javascript - React/Redux : Remove from cart not working, 没有收到任何错误

Question

我正在创建一个可以添加商品的购物车，我的 Add_To_Cart 操作正在运行，但 REMOVE_FROM_CART 没有执行任何操作。我的预感是 reducer 没有做正确的事情。这是我的代码:

Cart.js(容器):

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { RemoveFromCart } from '../actions/remove_from_cart';

class Cart extends Component {

  constructor(props){
     super(props);
     this.renderQuantity = this.renderQuantity.bind(this)
   }


  renderTotal(){
    const { cart } = this.props;
    let sum = 0;
    return (
      <div>
        ${cart.total}
      </div>
    )
  }

renderQuantity(){
    const { cart, RemoveFromCart } = this.props;
    return (
      <div>
        {Object.keys(cart.quantityPerId).map(function(key){
            return <li key={key}>
          item: {key} ||
          Quantity: {cart.quantityPerId[key]} ||
          <button
            onClick={() => RemoveFromCart(key, cart.quantityPerId[key])}
            >Return
          </button></li>;
    })}
  </div>
)
}


  render() {
    return (
      <div>
        <h3>Cart</h3>
        Total:
          {this.renderTotal()}
        Quantity per Item:
          {this.renderQuantity()}

      </div>
    );
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({ RemoveFromCart }, dispatch);
}


function mapStateToProps(state) {
  return { itemList: state.itemList, cart: state.cart }
}

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

remove_from_cart.js( Action 创建者)

export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';


export function RemoveFromCart(name, quantity) {
  return {
    type: REMOVE_FROM_CART,
    name,
    quantity
  };
}

reducer_cart.js( reducer )

import { ADD_TO_CART } from '../actions/add_to_cart';
import { REMOVE_FROM_LIST } from '../actions/remove_from_list';


const initialState = {
  total: 0,
  quantityPerId: {}
}



const total = (state = initialState.total, action) => {
  switch (action.type) {
    case ADD_TO_CART:
    if (parseInt(action.quantity) > 0 ) {
        return state += parseInt(action.price)
    }
  }
}

const quantityPerId = (state = initialState.quantityPerId, action) => {
  switch(action.type) {
     case ADD_TO_CART:
      if (parseInt(action.quantity) > 0) {
        return {...state, [action.name] : (state[action.name] || 0) + 1
      }

    }
case REMOVE_FROM_CART:
  Object.keys(quantityPerId).map(function(name){
    if (action.name === name && parseInt(action.quantity) > 0) {
      // return Object.assign({}, name, { name: action.quantity - 1})
      return {...state, name : state[action.name] - 1}
    }
})

  default:
    return state

  }
}

const cart = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {...state,
        total: total(state.total, action),
        quantityPerId: quantityPerId(state.quantityPerId, action)
      }
    default:
      return state
  }
}

 export default cart

同样，问题出在 REMOVE_FROM_CART 上。

Answer 1

你什么也没有返回:

case REMOVE_FROM_CART: {
  Object.assign()..... //but not return statement?
}

根据 redux 文档，每个 reducer 都需要始终返回新状态。尝试退回您的点差，看看会发生什么。

case REMOVE_FROM_CART: {
  return Object.assign... //returning spread
}