What might an e-commerce UI library might look like if rewritten with hooks? This shop app is an experiment using some of the patterns that might be helpful in the design of such a library. As the hooks ecosystem evolves over the coming months I plan to expand and refactor it slowly overtime to use as a reference.
Build a general purpose shop UI library that can be imported into any react app, connected to an API, and provide pluggable shop functionality with minimal declarative setup. The excellent Algolia InstantSearch react library is an inspiration for this.
<ShopProvider /> is a component exported by
shop.js. It provides any
global shop state for the shop app in the form of a
useReducer. It can be
used by the other hooks by providing an action dispatcher, and state.
<CollectionProvider /> is another provider for connecting state between a
list of products, and any number of search widgets. It should let the user
have more than one collections with different filter state, and results.
Functionality is exported from
shop.js in the form of custom hooks like
useCart. Each of these reducers can compose functionality both from the
core React reducers and the other
shop.js custom reducers. The goal is for
the user to need only one custom hook import to perform a set of commonly
related shop actions in their components. For example importing
should give a user all of the functionality required to manipulate or display
the shopping cart.
useEffecthook would look like.