title: Integrating react-cookie with react redux
body: <p>My main application is based on this old <a href="https://github.com/joshuaslate/mern-starter/tree/ac6a7d4b7839a7787aee0a1979fef34f7d291497" rel="nofollow noreferrer">boilerplate</a> which I have been slowly updating. Currently, all of the dependencies have been updated except for react-cookie.</p>
  <p>I am trying to upgrade react-cookie to version 3.0.4 using this <a href="https://medium.com/@rossbulat/using-cookies-in-react-redux-and-react-router-4-f5f6079905dc" rel="nofollow noreferrer">tutorial</a> but I need some help overcoming some challenges I am facing during the transition process.</p>
  <p>Following the tutorial, I changed index.js to</p>
  <pre><code>ReactDOM.render(
    &lt;CookiesProvider&gt;
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/CookiesProvider&gt;,
    document.querySelector('.wrapper'));
  </code></pre>
  <p>Now, my app.js file looks like this:</p>
  <pre><code>import React, { Component } from 'react'
  import { withCookies } from 'react-cookie'
  import Routes from '../Routes'
  
  class App extends Component {
    render() {
      return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;Routes cookies={this.props.cookies} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withCookies(App)
  </code></pre>
  <p>Now, my biggest concern comes here. My Routes component was never meant to be a Redux container so I changed it to this to accommodate the tutorial:</p>
  <pre><code>import React from 'react'
  import { connect } from 'react-redux'
  import { BrowserRouter, Route, Switch } from 'react-router-dom'
  import ScrollUpButton from 'react-scroll-up-button'
  
  // Import miscellaneous routes and other requirements
  import NotFoundPage from './components/pages/not-found-page'
  
  // Import Header and footer
  import HeaderTemplate from './components/template/header'
  import FooterTemplate from './components/template/footer'
  
  // Import static pages
  import HomePage from './components/pages/home-page'
  
  // Import authentication related pages
  import Register from './components/auth/register'
  import Login from './components/auth/login'
  import Logout from './components/auth/logout'
  import ForgotPassword from './components/auth/forgot_password'
  import ResetPassword from './components/auth/reset_password'
  import ConfirmationMessage from './components/auth/confirmation_message'
  import ResendVerificationEmail from './components/auth/resend_verification_email'
  
  // Import dashboard pages
  import Dashboard from './components/dashboard/dashboard'
  import ChangePassword from './components/dashboard/profile/change-password'
  
  // Import simulator pages
  import Simulator from './components/simulator/index'
  
  // Import higher order components
  import RequireAuth from './components/auth/require_auth'
  
  const BrowserRoutes = () =&gt; (
    &lt;BrowserRouter&gt;
      &lt;div&gt;
        &lt;HeaderTemplate logo=&quot;Stress Path Simulator&quot; /&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={HomePage} /&gt;
          &lt;Route exact path=&quot;/register&quot; component={Register} /&gt;
          &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
          &lt;Route exact path=&quot;/logout&quot; component={Logout} /&gt;
          &lt;Route exact path=&quot;/forgot-password&quot; component={ForgotPassword} /&gt;
          &lt;Route exact path=&quot;/reset-password/:resetToken&quot; component={ResetPassword} /&gt;
          &lt;Route exact path=&quot;/confirmation-message&quot;  render={() =&gt; &lt;ConfirmationMessage message=&quot;Please click on the link we sent to your email to verify your account.&quot; /&gt; } /&gt;
          &lt;Route exact path=&quot;/resend-verification-email&quot; component={ResendVerificationEmail} /&gt;
          &lt;Route exact path=&quot;/profile/change-password&quot; component={RequireAuth(ChangePassword)} /&gt;
          &lt;Route exact path=&quot;/confirmation-password-changed&quot; render={() =&gt; RequireAuth(&lt;ConfirmationMessage message=&quot;Password has been successfully changed!&quot; /&gt;)} /&gt;
          &lt;Route exact path=&quot;/simulator&quot; component={RequireAuth(Simulator)} /&gt;
          &lt;Route exact path=&quot;/dashboard&quot; component={RequireAuth(Dashboard)} /&gt;
          &lt;Route component={NotFoundPage} /&gt;
        &lt;/Switch&gt;
        &lt;FooterTemplate /&gt;
        &lt;ScrollUpButton /&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;
  );
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return ({
      state: state,
      cookies: ownProps.cookies
    });
  }
  
  export const Routes = connect(mapStateToProps, null)(BrowserRoutes)
  
  export default Routes
  </code></pre>
  <p>I believe the problem essentially arises here. By doing so, I thought I would have been able to use the cookies from every single component like this:</p>
  <pre><code>//get this.props.cookies
  const { cookies } = this.props;
  
  //setting a cookie
  cookies.set('name', 'Ross', { path: '/' });
  
  //getting a cookie
  cookies.get('name');
  </code></pre>
  <p>However, that doesn't seem the case and I cannot get cookies to work in any of my components especially in my actions/auth.js.
  Does anyone have any suggestions? How can I efficiently use cookies in this scenario? I am assuming I can send down the cookies prop to each component that needs it but I am curious to find out what could be the best/cleanest way of using react-cookie with redux. I am fairly new to the MERN JavaScript software stack and mostly self-thought  so I am a bit confused about some concepts. For example, if in Routes I am saving cookies into the redux's store, how can I access those cookies afterwards?</p>