无法使用 Redux thunk 显示列表产品

Question

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

无法使用 Redux thunk 显示列表产品

 import axios from "axios"; import { ALL_PRODUCT_FAIL, ALL_PRODUCT_REQUEST, ALL_PRODUCT_SUCCESS, CLEAR_ERRORS, } from "../constants/productsConstants"; // Get All Products export const getProduct = () => async (dispatch) => { try { dispatch({ type: ALL_PRODUCT_REQUEST }); let link = `http://localhost:8080/api/v1/products/`; const { data } = await axios.get(link); dispatch({ type: ALL_PRODUCT_SUCCESS, payload: data, }); } catch (error) { dispatch({ type: ALL_PRODUCT_FAIL, // payload: error.response.data, }); } }; // Clearing Errors export const clearErrors = () => async (dispatch) => { dispatch({ type: CLEAR_ERRORS }); };

 export const ALL_PRODUCT_REQUEST = "ALL_PRODUCT_REQUEST"; export const ALL_PRODUCT_SUCCESS = "ALL_PRODUCT_SUCCESS"; export const ALL_PRODUCT_FAIL = "ALL_PRODUCT_FAIL"; export const CLEAR_ERRORS = "CLEAR_ERRORS";

 import { ALL_PRODUCT_REQUEST, ALL_PRODUCT_SUCCESS, CLEAR_ERRORS, } from "../constants/productsConstants"; export const productsReducer = (state = { products: [] }, action) => { switch (action.type) { case ALL_PRODUCT_SUCCESS: return { loading: true, products: [], }; case ALL_PRODUCT_REQUEST: return { loading: false, products: action.payload.products, }; case CLEAR_ERRORS: return {...state, error: null, }; default: return state; } }; // Clearing Errors export const clearErrors = () => async (dispatch) => { dispatch({ type: CLEAR_ERRORS }); };

 import { createStore, combineReducers, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import { composeWithDevTools } from "redux-devtools-extension"; import { productsReducer, } from "./reducers/productsReducer"; const reducer = combineReducers({ products: productsReducer, }); // let initialState = {}; const middleware = [thunk]; const store = createStore( reducer, // initialState, {}, composeWithDevTools(applyMiddleware(...middleware)) ); export default store;

 import { React, useEffect } from "react"; import Layout from "../../components/Layouts/Layout" import Link from "next/link"; import { useDispatch, useSelector } from "react-redux" import { getProduct, clearErrors } from "../../redux/actions/productsAction" const ProductList = () => { const dispatch = useDispatch(); const { products, error } = useSelector((state) => state.products); useEffect(() => { if (error) { dispatch(clearErrors()); } dispatch(getProduct()) console.log("products: ", products) }, [dispatch, error]); return ( ) } export default ProductList