CODEWITHSUNDEEP
javascriptreactjsredux
Ioe Materials
Ioe Materials

Reputation: 183

Should I absolutely avoid prop passing while using redux with reactJs?

Okay so after a month or two of learning ReactJs, I finally realised the need of using redux. Turns out the apps that I was building had too much prop drilled into the components, and I realized I needed something to makes states available globally among multiple components. I went straight to redux.

As a slow person, I found redux very hard to understand. But now I feel like I have a bit of grasp of it. Take a look at the menu component that is in my app:

export default function Menu(props) {
  const dispatch = useDispatch();
  const products = useSelector((state) => state.productStates.products);
  useEffect(() => {
    axios.get("https://fakestoreapi.com/products").then(({ data }) => {
      dispatch({ type: "SET_PRODUCTS", data});
    });
  }, [dispatch]);

  return (
    <>
      <ProductDetails />
      <div className="menu">
        {products.map((product) => {
          return <Product key={product.id} product={product} />;
        })}
      </div>
    </>
  );

}

The question I wanna ask is, am I doing it right by passing product as a prop to my Product component. Like is this the standard way of doing stuff like this. If I'm only passing prop to the only direct child, it's not props drilling is it?

Upvotes: 0

Views: 928

Answers (1)

Ravi Kiran
Ravi Kiran

Reputation: 585

What you are doing is correct. If you want to understand when exactly to use Redux and when to stick to passing props, read this FAQ on Redux: https://redux.js.org/faq/general

Upvotes: 1

Related Questions