CODEWITHSUNDEEP
reactjsreduxreact-redux
bruce
bruce

Reputation: 463

How to pass data with react and redux?

I started to learn more about React and Redux but I'm having problems with passing data from my API call

I've tried to debug by using console.logs, and the Dev tool. I can't figure out why the data isn't present on my produce tab.

Here is my action for products:

import * as types from "./types";

export const receiveProducts = () => async dispatch => {
  const response = await fetch("https://api.myjson.com/bins/m2w5s");
  const data = await response.json();
  dispatch({ type: types.RECEIVED_PRODUCTS_SUCCESSFULLY, payload: data });
};

Component item:

import React from "react";
import { connect } from "react-redux";
import { addProductToCart, updateCart } from "../actions/cartAction";
import "./product.css";

class ProductItem extends React.Component {
  handleOnclick = product => {
    if (this.props.cart.length > 0) {
      let id = product.id;
      let cartIndex = this.props.cart.findIndex(cart => {
        return cart.id === id;
      });
      if (cartIndex === -1) {
        this.props.addProductToCart(product);
      } else {
        this.props.updateCart(id, "+");
      }
    } else {
      this.props.addProductToCart(product);
    }
  };
  render() {
    const { price, description, img } = this.props.product;
    return (
      <div className="card-image">
        <img src={img} alt="products" />
        <span className="card-description">{description}</span>
        <hr />
        <div className="card-content">
          <p>{description}</p>
          <h3>$ {price}</h3>
        </div>
        <button
          onClick={() => {
            this.handleOnclick(this.props.book);
          }}
        >
          Buy
        </button>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    cart: state.cart.cart
  };
};
export default connect(
  mapStateToProps,
  { addProductToCart, updateCart }
)(ProductItem);

Component List:

import React from "react";
import ProductItem from "./ProductItem";
import { connect } from "react-redux";
import { receiveProducts } from "../actions/productAction";
import "./product.css";

class ProductList extends React.Component {
  componentDidMount() {
    this.props.receiveProducts();
  }
  render() {
    const { products } = this.props;
    const productList = products.map(product => (
      <ProductItem product={product} key={product.id} />
    ));
    return (
      <div>
        <h1>Produce</h1>
        <div className="products-container">{productList}</div>
      </div>
    );
  }
}
const mapstateToProps = state => {
  return {
    products: state.products.products
  };
};
export default connect(
  mapstateToProps,
  { receiveProducts }
)(ProductList);

Upvotes: 0

Views: 463

Answers (1)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18083

You did a mistake in the file reducers/index.js, you wrote :

const rootReducer = combineReducers({
 books: productReducer,
 cart: cartReducer
});

instead of 

const rootReducer = combineReducers({
 products: productReducer,
 cart: cartReducer
});

Here is the sandbox containing the fixed version

Upvotes: 2

Related Questions