Container Pattern example

Why

When I started writing the Shop Component page feature it started out simple and clean. However small features after small features were slowly added to this component until finally it reached a point where the component was responsible for fetching a boolean value, isCollectionLoaded , from the Store that it did not need but rather its children needed.

Refactoring the logic for rendering the Spinner into a container for either the Collections component and Categories component made sense because they should be in control of rendering their individual spinners. In addition I found that by utilizing the Container Pattern it was easier to grasp the responsibilities of each component.

Prior to refactoring the Shop Component its responsibilities included the following:

• Fetching collections (shop items) to be passed down to its children
• Control rendering a Spinner or display child component via nested routing depending on if collections data is available in the Store

Before

• Shop Component

After

• Shop Component
• Collections Overview Container
• Spinner HOC