javascript - 将 react-cookie 与 react redux 集成

Question

我的主要应用程序基于这个旧的 boilerplate我一直在慢慢更新。目前，除了 react-cookie 之外的所有依赖项都已更新。

我正在尝试使用这个 tutorial 将 react-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

我认为问题本质上就出在这里。通过这样做，我认为我可以像这样使用来自每个组件的 cookie:

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

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

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

但是，情况似乎并非如此，我无法让 cookie 在我的任何组件中工作，尤其是在我的 actions/auth.js 中。 有没有人有什么建议？在这种情况下如何有效地使用 cookie？我假设我可以将 cookies Prop 发送给需要它的每个组件，但我很想知道什么是将 react-cookie 与 redux 一起使用的最佳/最干净的方法。我对 MERN JavaScript 软件堆栈还很陌生，主要是 self 思考，所以我对某些概念有点困惑。例如，如果在 Routes 中我将 cookie 保存到 redux 的存储中，我之后如何访问这些 cookie？

Answer 1

与其将 cookie 从 App/Router 向下传递，不如只包装需要 cookie 的组件。例如，您的登录组件将如下所示:

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

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