Честно говоря, я не знаю, почему действие попадает в блок 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