始终将react中的cookie设置为true

Question

我希望将cookie设置为始终为真，而不是在发生某些事情或单击某些事情时。

因此，有几个关于这方面的教程和文章。在我的例子中，应该是这样的：'mySpecialCookie = true‘。

安装包：npm install react-cookie

是否需要同时在index.js和App.js中导入？

我的index.js看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import configureStore from './store/configureStore';
import getMiddlewares from './middlewares';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';

const storeConfig = configureStore(getMiddlewares());

ReactDOM.render(
  <storeConfig.Provider store={storeConfig.store}>
    <App />
  </storeConfig.Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

所以我假设在ReactDOM内部它应该改成这样？

import { CookiesProvider } from "react-cookie";
...
ReactDOM.render(
  <storeConfig.Provider store={storeConfig.store}>
    <CookiesProvider>
      <App />
    </CookiesProvider>
  </storeConfig.Provider>,
  document.getElementById('root')
);

在App.js中，我使用useCookies钩子添加了它，但不知道在哪里使用它：

import React, { useEffect } from 'react';
import { useCookies } from 'react-cookie'; //// <---   added it here 
import { IntlProvider } from 'react-intl';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Main from './Main';
import OrderDetails from './OrderDetails';
import { fetchDictionary } from '../actions/dictionary';
import { getLanguageCode } from '../utils';
import { HOME_PAGE, ORDER_DETAILS } from '../constants/routes';

const App = () => {
  const dictionary = useSelector((state) => state.dictionary, shallowEqual);
  const routes = [
    { path: HOME_PAGE, component: Main },
    { path: `${ORDER_DETAILS}/:id`, component: OrderDetails }
  ];
  const dispatch = useDispatch();

  const [mySpecialCookie, setMySpecialCookie] = useCookies(true);  //// <---   added it here 

  useEffect(() => {
    dispatch(fetchDictionary(getLanguageCode()));
  }, [dispatch]);

  return (
    <IntlProvider
      key={dictionary.locale}
      locale={dictionary.locale}
      messages={dictionary.messages}>
      <Router>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            exact
            component={route.component}
          />
        ))}
      </Router>
    </IntlProvider>
  );
};

export default App;

有什么建议吗？

Answer 1

我发现了一种使用js-cookie的更短的方法。

在App.js文件中：

...
import Cookies from 'js-cookie';
...

const App = () => {
   ...
   Cookies.set('mySpecialCookie', true);
   ...
}