Redux Thunk

package.json

@@ -14,6 +14,7 @@
     "redux": "4.0.4",
     "redux-logger": "3.0.6",
     "redux-persist": "5.10.0",
+    "redux-thunk": "^2.3.0",
     "reselect": "4.0.0",
     "styled-components": "^4.3.2"
   },

src/pages/shop/shop.component.jsx

@@ -1,13 +1,10 @@
 import React from "react";
 import { Route } from "react-router-dom";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 
-import { updateCollections } from "../../redux/shop/shop.actions";
-
-import {
-  firestore,
-  convertCollectionsSnapshotToMap
-} from "../../firebase/firebase.utils";
+import { fetchCollectionStartAsync } from "../../redux/shop/shop.actions";
+import { selectIsCollectionFetching } from "../../redux/shop/shop.selectors";
 
 import CollectionPage from "../collection/collection.component";
 import WithSpinner from "../../components/with-spinner/with-spinner.component";
@@ -17,51 +14,49 @@ const CollectionPageWithSpinner = WithSpinner(CollectionPage);
 const CollectionsOverviewWithSpinner = WithSpinner(CollectionsOverview);
 
 class ShopPage extends React.Component {
-  state = {
-    loading: true
-  };
-
   componentDidMount() {
-    const { updateCollections } = this.props;
-    const collectionRef = firestore.collection("collections");
-
-    collectionRef.get().then(snapshot => {
-      const collectionsMap = convertCollectionsSnapshotToMap(snapshot);
-      updateCollections(collectionsMap);
-      this.setState({ loading: false });
-    });
+    const { fetchCollectionStartAsync } = this.props;
+    fetchCollectionStartAsync();
   }
 
   render() {
-    const { match } = this.props;
-    const { loading } = this.state;
+    const { match, isCollectionFetching } = this.props;
     return (
       <div className="shop-page">
         <Route
           exact
           path={`${match.path}`}
           render={props => (
-            <CollectionsOverviewWithSpinner isLoading={loading} {...props} />
+            <CollectionsOverviewWithSpinner
+              isLoading={isCollectionFetching}
+              {...props}
+            />
           )}
         />
         <Route
           exact
           path={`${match.path}/:collectionId`}
           render={props => (
-            <CollectionPageWithSpinner isLoading={loading} {...props} />
+            <CollectionPageWithSpinner
+              isLoading={isCollectionFetching}
+              {...props}
+            />
           )}
         />
       </div>
     );
   }
 }
 
+const mapStateToProps = createStructuredSelector({
+  isCollectionFetching: selectIsCollectionFetching
+});
+
 const mapDispatchToProps = dispatch => ({
-  updateCollections: collectionsMap =>
-    dispatch(updateCollections(collectionsMap))
+  fetchCollectionStartAsync: () => dispatch(fetchCollectionStartAsync())
 });
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps
 )(ShopPage);

src/redux/shop/shop.actions.js

@@ -1,6 +1,36 @@
 import { ShopActionTypes } from "./shop.types";
 
-export const updateCollections = collectionsMap => ({
-  type: ShopActionTypes.UPDATE_COLLECTIONS,
+import {
+  firestore,
+  convertCollectionsSnapshotToMap
+} from "../../firebase/firebase.utils";
+
+export const fetchCollectionStart = () => ({
+  type: ShopActionTypes.FETCH_COLLECTIONS_START
+});
+
+export const fetchCollectionSuccess = collectionsMap => ({
+  type: ShopActionTypes.FETCH_COLLECTIONS_SUCCESS,
   payload: collectionsMap
 });
+
+export const fetchCollectionFailure = errorMessage => ({
+  type: ShopActionTypes.FETCH_COLLECTIONS_FAILURE,
+  payload: errorMessage
+});
+
+export const fetchCollectionStartAsync = () => {
+  return dispatch => {
+    const collectionRef = firestore.collection("collections");
+
+    dispatch(fetchCollectionStart());
+
+    collectionRef
+      .get()
+      .then(snapshot => {
+        const collectionsMap = convertCollectionsSnapshotToMap(snapshot);
+        dispatch(fetchCollectionSuccess(collectionsMap));
+      })
+      .catch(error => dispatch(fetchCollectionFailure(error.message)));
+  };
+};

src/redux/shop/shop.reducer.js

@@ -1,11 +1,33 @@
 import { ShopActionTypes } from "./shop.types";
 
 const INITIAL_DATA = {
-  collections: null
+  collections: null,
+  isFetching: false,
+  errorMessage: undefined
 };
 
 const shopReducer = (state = INITIAL_DATA, action) => {
   switch (action.type) {
+    case ShopActionTypes.FETCH_COLLECTIONS_START:
+      return {
+        ...state,
+        isFetching: true
+      };
+
+    case ShopActionTypes.FETCH_COLLECTIONS_SUCCESS:
+      return {
+        ...state,
+        isFetching: false,
+        collections: action.payload
+      };
+
+    case ShopActionTypes.FETCH_COLLECTIONS_FAILURE:
+      return {
+        ...state,
+        isFetching: false,
+        errorMessage: action.payload
+      };
+
     case ShopActionTypes.UPDATE_COLLECTIONS:
       return {
         ...state,

src/redux/shop/shop.selectors.js

@@ -18,3 +18,8 @@ export const selectCollection = collectionUrlParam =>
     [selectCollections],
     collections => (collections ? collections[collectionUrlParam] : null)
   );
+
+export const selectIsCollectionFetching = createSelector(
+  [selectShop],
+  shop => shop.isFetching
+);

src/redux/shop/shop.types.js

@@ -1,3 +1,5 @@
 export const ShopActionTypes = {
-  UPDATE_COLLECTIONS: "UPDATE_COLLECTIONS"
+  FETCH_COLLECTIONS_START: "FETCH_COLLECTIONS_START",
+  FETCH_COLLECTIONS_SUCCESS: "FETCH_COLLECTIONS_SUCCESS",
+  FETCH_COLLECTIONS_FAILURE: "FETCH_COLLECTIONS_FAILURE"
 };

src/redux/store.js

@@ -1,10 +1,11 @@
 import { createStore, applyMiddleware } from "redux";
 import { persistStore } from "redux-persist";
 import logger from "redux-logger";
+import thunk from "redux-thunk";
 
 import rootReducer from "./root-reducer";
 
-const middlewares = [];
+const middlewares = [thunk];
 
 if (process.env.NODE_ENV === "development") {
   middlewares.push(logger);