将 react-cookie 与 react redux 集成

Question

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

我正在尝试使用本教程将 react-cookie 升级到版本 3.0.4，但我需要一些帮助来克服我在过渡过程中面临的一些挑战。

按照教程，我将索引.js更改为

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

现在，我的应用程序.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)

现在，我最担心的是这里。我的路由组件从来都不是 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 在我的任何组件中工作，尤其是在我的操作/身份验证.js中。 有人有什么建议吗？在这种情况下，如何有效地使用 Cookie？我假设我可以将 cookie 道具发送到需要它的每个组件，但我很好奇找出将 react-cookie 与 redux 一起使用的最佳/最干净方法。我对 MERN JavaScript 软件堆栈相当陌生，主要是自我思考，所以我对一些概念有点困惑。例如，如果在路由中我将 cookie 保存到 redux 的存储中，之后如何访问这些 cookie？

Answer 1

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

class Login extends React.Component {
render() {
let { cookies } = this.props;
let useCookie = cookies.get("testCookie");
...
}
}
export default withCookies(connect(mapStateToProps, null)(Login));