Вывод товаров (импровизированного) магазина с помощью Redux, на React

Question

моя проблема заключается в том, что я не могу отправить данные с компонента MarketPage.jsx в корзину (Basket.jsx) через Redux. Я пробовал по разному изменять код в селекторе корзины, но безуспешно. Подскажите пожалуйста как это осуществить.

MarketPage:

import axios from "axios"
import React, {useState, useEffect} from "react"
import { useDispatch } from "react-redux"
import { countAction } from "../store/counerAction"
import { basketAction } from "../store/basketAction"
import "../pages/Market.css"


const MarketPage = () => {
    const [product, setProduct] = useState([])

    useEffect(() => {
        const response = async () => {
        const request = await axios.get("https://dummyjson.com/products?limit=20")
        setProduct(request.data.products)
        }
        response()
    }, [])

    const dispatch = useDispatch()

    const handleSubmit = (selectProduct) => {
        dispatch(countAction())
        dispatch(basketAction({payload: selectProduct}))
    }

  return (
    <div>
        <h1>Market place:</h1>
        {product.map((item) => (
            <div key={item.id} className="product-block">
                <img src={item.thumbnail} alt="техника" className="product-image" />
                <h2>{item.title}</h2>
                <span>{item.description}</span>
                <p>{item.price}$</p>
                <p>rating: {item.rating}</p>
                <p>brand: {item.brand}</p>
                <p>category: {item.category}</p>
                <button onClick={() => handleSubmit(item)}>BUY</button>
            </div>
        ))}
    </div>
  )
}

export default MarketPage

Basket:

import React from "react"
import { useSelector } from "react-redux"


const Basket = () => {
  const addestProductToBasket = useSelector(state => state.stateProduct.basket)

  return (
    <div>
      <h1>Basket</h1>
        <div>
          {addestProductToBasket.basket}
        </div>
    </div>
  )
}

export default Basket

basketReducer:

const defaultState = {
    basket: []
}

export const basketReducer = (state = defaultState, action) => {
    switch(action.type){
        case "ADD_TO_BASKET":
        return {
            ...state,
            basket: [...state.basket, action.payload]
        }
        default: return state
    }
}

export default basketReducer

basketAction:

export const basketAction = (add) => ({
    type: "ADD_TO_BASKET",
    payload: add
})

store:

import { legacy_createStore as createStore, combineReducers} from "redux";
import countReducer from "./countReducer";
import basketReducer from "./basketReducer";

const rootReducer = combineReducers({
    stateCount: countReducer,
    stateProduct: basketReducer
})

export const store = createStore(rootReducer)

В store, в useSelector'е компонента Basket я обращаюсь к стейту stateProduct, для доступа к массиву basket этого редьюсера

Answer 1

Как и сказал @Sawd, для легкого обнаружения такой проблемы лучше прописать лог в коде, а именно в редьюсере:

const defaultState = {
    basket: []
}

export const basketReducer = (state = defaultState, action) => {
    switch(action.type){
        case "ADD_TO_BASKET":
            console.log("Adding to basket:", action.payload)
        return {
            ...state,
            basket: [...state.basket, action.payload]
            
        }
        default: return state
    }
}

export default basketReducer

конечно, использование лога в редьюсере может быть нежелательным, но в том же Redux Dev Tools я не заметил ничего такого, что дало бы мне понять, что нужно выводить полученные данные из стора(store) с помощью ключ-значения payload который находится в действии (basketAction). Вот как всё должно быть:

const Basket = () => {
  const addestProductToBasket = useSelector(state => state.stateProduct.basket)

  return (
    <div>
      <h1>Your basket</h1>
          {addestProductToBasket.map((product) => (
            <div key={product.payload.id} className="product-block">
              {/* в dispatch'е копмпонента MarketPAge, в basketAction я использу. payload
              его же я и присваиваю к addestProductToBasket т.к. payload сохраняет
              в себе значения и выводит их в других местах  */}
                <img src={product.payload.thumbnail} alt="техника" className="product-image" />
                <h2>{product.payload.title}</h2>
                <span>{product.payload.description}</span>
                <p>{product.payload.price}$</p>
                <p>rating: {product.payload.rating}</p>
                <p>brand: {product.payload.brand}</p>
                <p>category: {product.payload.category}</p>
            </div>
          ))}
    </div>
  )
}

Додуматься что, где ,когда и как, думаю будет никому не сложно. Но на решение этой проблемы я потратил весь день.

БЛОГ НА HUSL

Вывод товаров (импровизированного) магазина с помощью Redux, на React

Ответы (1 шт):