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在我的任何组件中都能正常工作，尤其是在我的action / auth.js中。有没有人有什么建议？在这种情况下，如何有效使用Cookie？我以为我可以将cookie道具发送给需要它的每个组件，但是我很好奇找出哪种可能是将react-cookie与redux一起使用的最好/最简洁的方法。我对MERN JavaScript软件栈还很陌生，并且大多是自以为是的，所以我对某些概念感到有些困惑。例如，如果在“路线”中我将cookie保存到redux的商店中，之后如何访问这些cookie？

Answer 1

与其从应用程序/路由器向下传递cookie，不如只包装需要cookie的组件。例如，您的Login组件将如下所示：

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

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

将react-cookie与react redux集成

1 个答案: