Created storefront API example using React and Redux for JavaScript Buy SDK

[mikeq1225]

I wanted to create a react example that would be easily scalable.

My solution was to create a working example by refactoring the React-JS-Buy example that rewrites the components to be functional components in stead of class based components.
I added Redux to create a store that is accessible throughout the app.

I added the folder reactHooks-redux-js-buy with my files as to not replace the originals in case anyone needs to reference those.

Let me know if there is anything that I need to change.

Thanks.

[swalkinshaw]

Thanks @mikeq1225

I got some warnings while running it. Does these matter?

Compiled with warnings.

./src/components/Products.js
  Line 10:5:  React Hook useEffect has a missing dependency: 'fetchProducts'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

./src/components/App.js
  Line 22:5:  React Hook useEffect has missing dependencies: 'createCheckout', 'createShop', and 'fetchProducts'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

./src/components/ProductView.js
  Line 40:5:  React Hook useEffect has a missing dependency: 'fetchProduct'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

./src/components/Cart.js
  Line 53:5:  React Hook useEffect has a missing dependency: 'getCount'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Otherwise, it appears to be working well 👍

[mikeq1225]

@swalkinshaw

I don't think the warnings matter.
I got these from the React Docs:

• "It is only safe to omit a function from the dependency list if nothing in it (or the functions called by it) references props, state, or values derived from them."

• "You can try moving that function outside of your component. In that case, the function is guaranteed to not reference any props or state, and also doesn’t need to be in the list of dependencies."

All of the functions that are triggering this warning are coming from functions that are outside of the component. They are all in redux/ducks/shopify index.js. Therefore they don't reference props, component state or values, and the function shouldn't change.

Thanks for the question.

[swalkinshaw]

Sounds good, thanks 👍