Can't get cookie in App loading request

[Limin-Sun]

I can see the cookie in App loading request, but I can't get it by calling getAll() or get(name). I only can get different cookie after I add it by calling set(name, value) in my code.

[eXon]

Hi @Limin-Sun

Do you have an example or a step-by-step process to replicate your issue?

Thank you

[Limin-Sun]

Our app is launched from our internal portal site and a cookie is added to loading request. We want to read the cookie and pass it to all other service calls, so I used some code like your example - src/client.js and src/components/App.js as following: // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import injectTapEventPlugin from 'react-tap-event-plugin'; import { Provider } from 'react-redux'; import { compose, createStore, applyMiddleware } from 'redux'; import { persistStore, autoRehydrate } from 'redux-persist'; import thunk from 'redux-thunk'; import createLogger from 'redux-logger'; import { AppContainer } from 'react-hot-loader'; import { CookiesProvider } from 'react-cookie'; import reducers from './reducers'; import App, { middleware } from './router'; import '../styles/index.scss'; import '../styles/animation.scss'; const logger = createLogger(); injectTapEventPlugin(); const store = compose( window.devToolsExtension ? window.devToolsExtension() : f => f, process.env.NODE_ENV === 'production' ? applyMiddleware(middleware, thunk) : applyMiddleware(middleware, thunk, logger) , autoRehydrate() )(createStore)(reducers); persistStore(store); const rootElement = document.getElementById('root'); ReactDOM.render( <rovider store={store}> <AppContainer> <CookiesProvider> <App /> </CookiesProvider> </AppContainer> </rovider>, rootElement ); // src/container/.../index.js import React, { Component } from 'react'; import { instanceOf } from 'prop-types'; import { withCookies, Cookies } from 'react-cookie'; import { Field, reduxForm, stopAsyncValidation, change } from 'redux-form'; class App extends Component { static propTypes = { cookies: instanceOf(Cookies).isRequired }; componentWillMount() { this.props.initializeState(); const { cookies } = this.props; //cookies.set('MYCOOKIE', 'myCookieValue',{ path: '/' }); //cookies.remove('MYCOOKIE') console.log("cookies : ", cookies.getAll() ); console.log("cookies.get('MYCOOKIE') : ", cookies.get('MYCOOKIE') ); } ..... } ...... export default reduxForm({ validate, form: FORM_NAME, destroyOnUnmount: false })( connect(null, mapDispatchToProps)(withCookies(App)) ); Thank you for your prompt response!

[eXon]

Are you using this with server-rendering? If so, you need to pass the cookie header to the CookiesProvider. There is an example in the readme.

[Limin-Sun]

We are using more like your example code src/components/App.js and src/client.js

[eXon]

@Limin-Sun What version of react-cookie are you using?

[eXon]

Closed due to inactivity. Let me know if you're still having troubles here.

[mschipperheyn]

He's likely running into reduxjs/react-redux#914. I suggest you reopen this.
I'm running into this also. Should be hard to fix. Just move the withCookies to the component instead of the connect or something like that.