У меня проблемы с вызовом состояния из redux с реакцией - PullRequest
Новая
       52

У меня проблемы с вызовом состояния из redux с реакцией

1 голос
/ 14 июля 2020

Привет, я новичок в реакции, я делаю простое приложение для корзины покупок с помощью redux и реагирую для практики. и я вызываю данные api prouduct и сохраняю их в магазине под названием products, и когда пользователь нажимает кнопку, они должны быть сохранены в состоянии под названием «тележка». и когда я console.log (props.state.cart) показывает мне данные, которые щелкнул пользователь, но если я попытаюсь вызвать данные, он покажет мне ошибку, что карта не является функцией.

Список продуктов. js

import React, { useEffect } from "react";
import { getAllProducts, getCartList } from "../../../actions/postActions";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { AddToCartButton } from "./AddToCartButton";
// import ShoppingCart from "../shoppingCart.js/ShoppingCart";

const ProductList = (props) => {
  useEffect(() => {
    props.getAllProducts();
  }, []);

  // when I console.log it shows the data which user clicked.
  console.log(props.cartList);
  const addToCart = async (item) => {
    props.getCartList(item);
  };

  return (
    <div>
      {props.products.map((x) => (
        <div key={x.id}>
          <img className="productImg" src={x.image} alt={x.title} />
          <h4>{x.title}</h4>
          <p>{x.price}€</p>
          <button onClick={() => addToCart(x)}>test cart</button>
          <AddToCartButton />
        </div>
      ))}

      <div>
        {props.cartList &&
          props.cartList.map((x) => <li key={x.id}>{x.title}</li>)}
      </div>
    </div>
  );
};

ProductList.propTypes = {
  getAllProducts: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
  getCartList: PropTypes.func.isRequired,
  cartList: PropTypes.array.isRequired,
};
const mapStateToProps = (state) => ({
  products: state.items.allItems,
  cartList: state.items.cart,
});

export default connect(mapStateToProps, { getAllProducts, getCartList })(
  ProductList
);

postReducer. js

import { FETCH_PRODUCTS, SHOPPING_CART, AMOUNT, USERS } from "../actions/types";

const initialState = {
  allItems: [],
  cart: [],
  amount: 3,
 
};

export default function (state = initialState, action) {
  console.log(action.payload);
 //output: list of allItems and object of cart item which user clicked
  switch (action.type) {
    case FETCH_PRODUCTS:
      return {
        ...state,
        allItems: action.payload,
      };

    case SHOPPING_CART: {
      return {
        ...state,
        cart: action.payload,
      };
    }
    case AMOUNT: {
      return {
        ...state,
        amount: state.amount,
      };
    }
  

    default:
      return state;
  }
}

1 Ответ

0 голосов
/ 14 июля 2020

В редукторе попробуйте это: 

case SHOPPING_CART: {
  return {
    ...state,
    cart: [action.payload,...state.cart],
  };
}
...