Refactoring application to use selectors and reselect lib

package.json

@@ -19,6 +19,7 @@
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-saga": "^1.1.3",
+    "reselect": "^4.0.0",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {

src/App.js

@@ -2,11 +2,14 @@ import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { createStructuredSelector } from 'reselect';
 import BackToTop from './components/BackToTop';
 import Header from './components/Header';
 import Loader from './components/Loader';
 import RoutesContainer from './Routes';
-import { cards as cardsActions } from './store/ducks/cards';
+import {
+  cards as cardsActions, makeSelectLoading, makeSelectCards, makeSelectError,
+} from './store/ducks/cards';
 import GlobalStyle from './styles/global';
 
 
@@ -24,18 +27,19 @@ function App({
   return (
     <Router>
       <GlobalStyle />
-      <Header doSearchPokemon={doSearchPokemon} />
       {loading && <Loader />}
+
+      <Header doSearchPokemon={doSearchPokemon} />
       <RoutesContainer cards={cards} />
       <BackToTop />
     </Router>
   );
 }
 
-const mapStateToProps = (state) => ({
-  loading: state.get('loading'),
-  error: state.get('error'),
-  cards: state.get('cards'),
+const mapStateToProps = createStructuredSelector({
+  loading: makeSelectLoading,
+  error: makeSelectError,
+  cards: makeSelectCards,
 });
 
 const mapDispatchToProps = {
@@ -44,7 +48,7 @@ const mapDispatchToProps = {
 
 App.propTypes = {
   loading: PropTypes.bool.isRequired,
-  cards: PropTypes.objectOf(Array).isRequired,
+  cards: PropTypes.arrayOf(Object).isRequired,
   fetchCards: PropTypes.func.isRequired,
 };
 

src/Routes.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import CardDetails from './components/CardDetails';
 import CardsList from './components/CardsList';
-import PropTypes from 'prop-types';
-import { Route, Switch } from 'react-router-dom';
 
 const RoutesContainer = ({ cards }) => (
   <>
@@ -15,7 +15,7 @@ const RoutesContainer = ({ cards }) => (
 );
 
 RoutesContainer.propTypes = {
-  cards: PropTypes.objectOf(Array).isRequired,
+  cards: PropTypes.arrayOf(Object).isRequired,
 };
 
 export default RoutesContainer;

src/components/CardsList/index.js

@@ -41,7 +41,7 @@ const Cards = ({ cards }) => (
 );
 
 Cards.propTypes = {
-  cards: PropTypes.objectOf(Array).isRequired,
+  cards: PropTypes.arrayOf(Object).isRequired,
 };
 
 export default Cards;

src/store/ducks/cards.js

@@ -3,6 +3,7 @@ import { createActions, handleActions } from 'redux-actions';
 import {
   call, delay, put, takeLatest,
 } from 'redux-saga/effects';
+import { createSelector } from 'reselect';
 import api from '../../api';
 
 /** ********************************
@@ -22,6 +23,7 @@ const requestPattern = { REQUEST: undefined, SUCCESS: undefined, FAILURE: undefi
 const actions = createActions({
   cards: {
     FETCH_CARDS: requestPattern,
+    RESELECT_TEST: undefined,
   },
 });
 
@@ -73,3 +75,11 @@ function* fetchCards(action) {
 export function* saga() {
   yield takeLatest(cards.fetchCards.request, fetchCards);
 }
+
+/** ********************************
+ * SELECTORS
+ ******************************** */
+
+export const makeSelectCards = createSelector((state) => state.get('cards'), (substate) => substate.toJS());
+export const makeSelectLoading = createSelector((state) => state.get('loading'), (bool) => bool);
+export const makeSelectError = createSelector((state) => state.get('error'), (bool) => bool);

yarn.lock

@@ -9091,6 +9091,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"