我的主要应用是基于这个旧的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)
现在,我最关心的是这里。 My 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?我假设我可以将cookie支持发送到需要它的每个组件,但我很想知道什么是使用reactx与redux的最佳/最干净的方法。我对MERN JavaScript软件堆栈相当新,而且大多是自我思考的,所以我对一些概念感到有些困惑。例如,如果在路由中我将cookie保存到redux的商店,那我怎么能在之后访问这些cookie?
不是从应用程序/路由器传递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));