Question

我的reducer没有更新状态。我的动作正在调度，但我的reducer没有更新我的状态。我的应用程序状态有两个对象产品（Array）和cart（数组）。

我的应用程序有两个缩减器

cartReducer

＆＃13;

export  function cartReducer(state={cart:[
{id:1},
{id:2}
]},actions){
        switch(actions.payload)
        {
            case "ADD_TO_CART":
            console.log("Reducer called")
            return {cart:[...state.cart,...actions.payload]}
            default:
            return state;
        }
    }

＆＃13;

productReducer

＆＃13;

export  function ProductReducer(state={
product:[{
    id:1,
    ProductName:"LG TV",
    Description:"This is the best tv available today in the market.This is the best tv available today in the market.This is the best tv available today in the market.This is the best tv available today in the market",
    Price:200,

    },
    {
        id:2,
        ProductName:"Apple TV",
        Description:"This is the best tv available today in the market",
  
        Price:300,
    },
    {
        id:3,
        ProductName:"Hp TV",
        Description:"This is the best tv available today in the market",
  
        Price:400,
    },{
        id:5,
        ProductName:"LC TV",
        Description:"This is the best tv available today in the market",
        Price:700,
    }]},actions){
    switch(actions.payload)
    {
        case "ADD_PRODUCT":
        return {product:[...state.product,...actions.payload]}
        default:
        return state;
    }
}

＆＃13;

我的combineReducer（index.js）

＆＃13;

import {combineReducers} from 'redux';
import {ProductReducer} from './ProductReducer.js';
import {cartReducer} from './cartReducer.js';

const rootReducer=combineReducers({
    product:ProductReducer,
    cart:cartReducer
})

export default rootReducer

＆＃13;

我的操作文件是：

cartActions

＆＃13;

export function addToCart(data) 
 {
     console.log("Actions called")
     return {
         type:"ADD_TO_CART",
          payload: data
     } 
 };

＆＃13;

我的主要index.js文件

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import '../node_modules/materialize-css/dist/css/materialize.min.css';
import '../node_modules/materialize-css/dist/js/materialize.min.js';
import reducers from './reducers/index';
const store=createStore(reducers);

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));

＆＃13;

我可以使用我的组件ProductDescription.js和ProductList.js中的mapStateToProps从reducers访问初始状态

ProductList.js

＆＃13;

import React, { Component } from 'react';
import {connect} from 'react-redux';
import ProductDescription from './ProductDescription';
class ProductList extends Component {
     componentDidMount(){
     }
  render() {
      const arr=this.props.product.map((data)=>{
        return(
        <li key={data.id}>
       <ProductDescription data={data} />

          </li>
      )});
 
    return (
      <div className="row">
      <div className="col s12 ">
        <div className="card ">
          <div className="card-content ">
          <h2 >Product List</h2>
          <br/>
          <hr/>
          <br/>
          <ul>
           {arr}
            </ul>
          </div>
      </div>
    </div>
        </div>      
    );
  }
}
function mapStateToProps(state)
{
  return {
    cart:state.cart.cart,
    product:state.product.product,
  }
}

export default connect(mapStateToProps)(ProductList);

＆＃13;

ProductDescription.js

＆＃13;

import React, { Component } from 'react';
import {connect} from 'react-redux';
import  {addToCart} from '../Actions/cartActions';
import {bindActionCreators} from 'redux';

class ProductDescription extends Component {
handleCart()
  {
    const data1=[...this.props.cart,
      {
        id:this.props.data.id,
        ProductName:this.props.data.ProductName,
        Description:this.props.data.Description,
        Price:this.props.data.Price,
      }];
      console.log(data1);
   this.props.addToCart(data1);
  setTimeout(()=>{console.log(this.props.cart)},3000);
  
  } 
  
  render() {
    return (
      <div className="row">
        <div className="col s12">
        <div className="card">
        <div className="card-content">
          <div className="card-title">
          {this.props.data.ProductName}
          </div>
          <hr/>
          <div>
          {this.props.data.Description}
          </div>
          <hr/>
          <div >
          Price :{this.props.data.Price}
          <br/>
          </div>
          
          <div className="right">
            <button  onClick={this.handleCart.bind(this)} className="waves-effect waves-light btn" >Add To Cart</button>      
            </div>
            <br/>
            <br/>
        </div>
          </div>
          </div>
          </div>
    );
  }
}
function mapStateToProps(state)
{
  return{
  cart:state.cart.cart,
  }
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    addToCart:addToCart  
  },dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(ProductDescription);

＆＃13;

但我无法从ProductDescription.js中的console.log（this.props.cart）获取更新的购物车状态。即使我有3000的超时。我甚至在CartReducer.js中放置了一个console.log语句来检查是否正在访问reducer。但是没有调用console.log语句。

以下是我的控制台输出：

Console.log output

我的react-reducer状态没有更新

0 个答案: