fix: used selectors in mapstatetoprops

client/src/components/Header/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { createSelector } from 'reselect';
 import Media from 'react-media';
 import FCCSearch from 'react-freecodecamp-search';
 
@@ -13,14 +14,16 @@ import './header.css';
 
 import {
   toggleDisplaySideNav,
-  toggleDisplayMenu
+  toggleDisplayMenu,
+  displayMenuSelector
 } from '../layouts/components/guide/redux';
 
-const mapStateToProps = state => {
+const mapStateToProps = createSelector(
-  return {
+  displayMenuSelector,
-    displayMenu: state.guideNav.displayMenu
+  displayMenu => ({
-  };
+    displayMenu
-};
+  })
+);
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators({ toggleDisplaySideNav, toggleDisplayMenu }, dispatch);

client/src/components/layouts/Guide.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { createSelector } from 'reselect';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 
 import SideNav from './components/guide/SideNav';
@@ -13,7 +14,10 @@ import './guide.css';
 
 import {
   toggleExpandedState,
-  toggleDisplaySideNav
+  toggleDisplaySideNav,
+  displaySideNavSelector,
+  displayMenuSelector,
+  expandedStateSelector
 } from './components/guide/redux';
 
 const propTypes = {
@@ -40,13 +44,16 @@ const propTypes = {
   toggleExpandedState: PropTypes.func
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = createSelector(
-  return {
+  displaySideNavSelector,
-    expandedState: state.guideNav.expandedState,
+  displayMenuSelector,
-    displayMenu: state.guideNav.displayMenu,
+  expandedStateSelector,
-    displaySideNav: state.guideNav.displaySideNav
+  (displaySideNav, displayMenu, expandedState) => ({
-  };
+    displaySideNav,
-};
+    displayMenu,
+    expandedState
+  })
+);
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators({ toggleExpandedState, toggleDisplaySideNav }, dispatch);

client/src/components/layouts/components/guide/redux/index.js

@@ -19,6 +19,10 @@ export const toggleExpandedState = createAction(types.toggleExpandedState);
 export const toggleDisplaySideNav = createAction(types.toggleDisplaySideNav);
 export const toggleDisplayMenu = createAction(types.toggleDisplayMenu);
 
+export const displaySideNavSelector = state => state[ns].displaySideNav;
+export const displayMenuSelector = state => state[ns].displayMenu;
+export const expandedStateSelector = state => state[ns].expandedState;
+
 export const reducer = handleActions(
   {
     [types.toggleExpandedState]: (state, { payload }) => ({