Cant use Redux thunk show list products

Question

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

try to change ```import { React, useEffect } from "react";``` to ```import React, { useEffect } from "react";``` — loyoliteabid, Sep 27 '22 at 07:27

Cant use Redux thunk show list products

0 Answers0