Redux Ax ios, не удается получить ошибочный ответ от блока catch - PullRequest
0 голосов
/ 28 января 2020

Честно говоря, я не знаю, почему действие попадает в блок catch, поскольку оно сначала проходит через блок try и фактически отправляет GET_PRODUCTS.

Вторая проблема, как указано, я не могу получить ошибку из блока catch , Я попытался получить ответ от ошибки, он все еще не работал. Ниже я опубликую свой компонент, действие и редуктор, если вам понадобится больше кода, чтобы помочь мне, не стесняйтесь, я оставлю ссылку на репо внизу, а также спасибо!

https://github.com/tigerabrodi/eBuy

компонент продукта

import React, {Fragment, useEffect, useState} from 'react';
import { connect } from 'react-redux';
import { getAllProducts } from '../../redux/product/product.actions';
import Spinner from '../layout/Spinner';
import Pagination from './Pagination';
import ProductItem from './ProductItem';

const Products = ({getAllProducts, product: {products, totalProducts, loading}}) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [productsPerPage] = useState(6);
    const paginate = pageNumber => setCurrentPage(pageNumber);

    useEffect(() => {
        getAllProducts(currentPage);
    }, [products, currentPage]);


    return loading ? <Spinner /> : (
        <Fragment>
        <div className="container">
        <div className="row">
        <div className="col text-center">
        <h1 className="text-warning">Products</h1>
        <p className="lead text-danger">
         Find Your Item Today
        </p>
        </div>
        </div>
        </div>
        <div className="container">
        <div className="row">
        {products.map(product => (
            <div className="col-md-4">
                <ProductItem key={product._id} product={product} /> 
            </div>
        ))}
        <div className="col-12">
        <Pagination productsPerPage={productsPerPage} totalProducts={totalProducts} paginate={paginate} />
        </div>
        </div>
        </div>
        </Fragment>
    );
} 


const mapStateToProps = state => ({
    product: state.product
})

export default connect(mapStateToProps, {getAllProducts})(Products);

действие продукта

export const getAllProducts = (page) => async dispatch => {
    try {
        const res = await axios.get(`/products?page=${page}`);
        dispatch({
            type: ProductActionTypes.GET_PRODUCTS,
            payload: {products: res.data.products, totalItems: res.data.totalItems}
        })
    } catch (err) {
        dispatch({
            type: ProductActionTypes.PRODUCT_ERROR,
            payload: err
            })
    }
}

продукт редуктор

import {ProductActionTypes} from "./product.types";

const initialState = {
    products: [],
    totalProducts: null,
    product: null,
    loading: true,
    error: {}
}

const productReducer = (state = initialState, action) => {
    const {payload, type} = action;
    switch(type) {
        case ProductActionTypes.GET_PRODUCTS:
            return {
                ...state,
                products: payload.products,
                totalProducts: payload.totalItems,
                loading: false
            }
        case ProductActionTypes.ADD_PRODUCT:
            return {
                ...state,
                products: [payload, ...state.products],
                loading: false
            }
            case ProductActionTypes.PRODUCT_ERROR: 
            return {
                ...state,
                error: payload,
                loading: false
            }
        default:
            return state;
    }
}

export default productReducer
...