Интеграция реагирующего печенья с реактивным редуксом

Question

Мое основное приложение основано на этом старом шаблоне , который я медленно обновлял.В настоящее время обновлены все зависимости, за исключением реагирующих файлов cookie.

Я пытаюсь обновить реагирующие файлы cookie до версии 3.0.4 с помощью этого учебного пособия , но мне нужна помощь в преодолении некоторыхпроблемы, с которыми я сталкиваюсь в процессе перехода.

Следуя инструкции, я изменил index.js на

ReactDOM.render(
  <CookiesProvider>
    <Provider store={store}>
      <App />
    </Provider>
  </CookiesProvider>,
  document.querySelector('.wrapper'));

Теперь мой файл app.js выглядит следующим образом:

import React, { Component } from 'react'
import { withCookies } from 'react-cookie'
import Routes from '../Routes'

class App extends Component {
  render() {
    return (
      <div className="container">
        <Routes cookies={this.props.cookies} />
      </div>
    );
  }
}

export default withCookies(App)

Теперь моя самая большая проблема возникает здесь.Мой компонент Routes никогда не должен был быть контейнером Redux, поэтому я изменил его, чтобы приспособить учебник:

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 = () => (
  <BrowserRouter>
    <div>
      <HeaderTemplate logo="Stress Path Simulator" />
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/logout" component={Logout} />
        <Route exact path="/forgot-password" component={ForgotPassword} />
        <Route exact path="/reset-password/:resetToken" component={ResetPassword} />
        <Route exact path="/confirmation-message"  render={() => <ConfirmationMessage message="Please click on the link we sent to your email to verify your account." /> } />
        <Route exact path="/resend-verification-email" component={ResendVerificationEmail} />
        <Route exact path="/profile/change-password" component={RequireAuth(ChangePassword)} />
        <Route exact path="/confirmation-password-changed" render={() => RequireAuth(<ConfirmationMessage message="Password has been successfully changed!" />)} />
        <Route exact path="/simulator" component={RequireAuth(Simulator)} />
        <Route exact path="/dashboard" component={RequireAuth(Dashboard)} />
        <Route component={NotFoundPage} />
      </Switch>
      <FooterTemplate />
      <ScrollUpButton />
    </div>
  </BrowserRouter>
);

const mapStateToProps = (state, ownProps) => {
  return ({
    state: state,
    cookies: ownProps.cookies
  });
}

export const Routes = connect(mapStateToProps, null)(BrowserRoutes)

export default Routes

Я полагаю, что проблема, по сути, возникает здесь.Сделав это, я подумал, что смог бы использовать куки-файлы из каждого отдельного компонента, например:

//get this.props.cookies
const { cookies } = this.props;

//setting a cookie
cookies.set('name', 'Ross', { path: '/' });

//getting a cookie
cookies.get('name');

Однако это не так, и я не могу заставить куки работать в любом измои компоненты, особенно в моих действиях / auth.js.У кого-нибудь есть предложения?Как я могу эффективно использовать куки в этом сценарии?Я предполагаю, что могу отправить опору cookie-файлов каждому компоненту, который в этом нуждается, но мне любопытно узнать, что может быть лучшим / самым чистым способом использования response-cookie с избыточным количеством.Я довольно новичок в программном стеке MERN JavaScript и, в основном, думаю о себе, поэтому меня немного смущают некоторые концепции.Например, если в «Маршрутах» я сохраняю файлы «cookie» в хранилище редукса, как я могу получить к ним доступ впоследствии?

Answer 1

Вместо того, чтобы передавать куки из приложения / маршрутизатора вниз, лучше обернуть только те компоненты, которые будут нуждаться в куки. Например, ваш компонент Login будет выглядеть так:

class Login extends React.Component {
   render() {
      let { cookies } = this.props;
      let useCookie = cookies.get("testCookie");
      ...
   }
}

export default withCookies(connect(mapStateToProps, null)(Login));