score:1

Accepted answer

firstly you are using usedispatch wrong.

it must be used like this:

const dispatch = usedispatch();

and then you can use it like this:

  const loadproducts = usecallback(() => {
    dispatch(getallproducts());
  }, [dispatch]);

  useeffect(() => {
    loadproducts();
  }, [loadproducts]);

secondly, you need to extract products from useselector like this:

  const products = useselector(state => state.data.products)

then you need to dispath fetchsuccess here

export const getallproducts = () => {
  console.log("here is get all products");
  return dispatch => {
    dispatch(isloadingfetch());
    api
      .get("/products")
      .then(response => {
        console.log("response data", response.data);
        dispatch(fetchsucess(response.data));
      })
      .catch(err => {
        dispatch(fetchfailed(err.message));
      });
  };
};

so all component code can be like this to show your products: (note that i simplifed the render to show only product name)

import react from "react";
import { usedispatch, useselector } from "react-redux";
import { useeffect, usecallback } from "react";
import { getallproducts } from "../store/actions/fetch/index";

export default function cards() {

  const dispatch = usedispatch();

  const loadproducts = usecallback(() => {
    dispatch(getallproducts());
  }, [dispatch]);

  useeffect(() => {
    loadproducts();
  }, [loadproducts]);

  const products = useselector(state => state.data.products); // or  state.data.filteredproducts

  console.log("products:", products);

  if (products && products.length > 0) {
    return (
      <div>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </div>
    );
  } else {
    return <div>no products</div>;
  }
}


Related Query

More Query from same tag