question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Value is Undefined in SSR of React-Redux v6

See original GitHub issue

There is an issue that I found in regarding to React Redux v6 on SSR, it might be related to the new Context.Consumer API.

I am currently getting an error in the terminal that states

Could not find "store" in the context of "Connect(WithStyles(HomeRoute))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(WithStyles(HomeRoute)) in connect options.

However when I turn off SSR, the app works fine with no issue. So this issue is only on the server side rendering. I also dug into the new version 6 code and when I console.log Context that is being passed into the Connect class of connectAdvanced it logs

{ '$$typeof': Symbol(react.context),
  _calculateChangedBits: null,
  _currentValue:
   { storeState:
      { userReducer: { users: [], user: null },
        questionReducer: { questions: [], total: 0 } },
     store:
      { dispatch: [Function],
        subscribe: [Function: subscribe],
        getState: [Function: getState],
        replaceReducer: [Function: replaceReducer],
        [Symbol(observable)]: [Function: observable] } },
  _currentValue2: null,
  _threadCount: 0,
  Provider: { '$$typeof': Symbol(react.provider), _context: [Circular] },
  Consumer:
   { '$$typeof': Symbol(react.context),
     _context: [Circular],
     _calculateChangedBits: null },
  _currentRenderer: null,
  _currentRenderer2: null }

which contains the store and store state, however the issue is when it is being consumed by the Consumer

<ContextToUse.Consumer>
            {this.renderWrappedComponent}
 </ContextToUse.Consumer>

value is being undefined in this.renderWrappedComponent.

The expected behavior is that value should contain store and storeState from the store in Consumer on the server side, similar to the behavior of client side.

The version of redux is 4.0.1 and react-redux 6.0.0, Mac OS. This was not an issue in the previous version of react-redux 5.1.1 since it was using the old context API.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
markeriksoncommented, Dec 8, 2018

Can you put together a project that reproduces the issue?

0reactions
sinwailam193commented, Jan 10, 2019

Hey @DBosley, were you also using the https://github.com/ctrlplusb/react-universally boilerplate? If you are, I would say just don’t use react-async-bootstrapper, it’s what is causing this bug in the first place.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Upgrading to React-Redux v6: Around the New Context API
The major implementation change of React-Redux v6 is that it migrates from using React's Legacy Context API to React's New Context API.
Read more >
Upgrading to React-Redux v6: Around ... - A Work in Progress
In this writeup I will cover the following topics about React-Redux v6: Using custom context; Accessing the store; Supporting multiple stores.
Read more >
Value from Redux store always returns undefined
Trying to store user input from form into redux, however value accessed through useSelector is always undefined. Slice component ...
Read more >
connected-react-router - npm
A Redux binding for React Router v4 and v5. Latest version: 6.9.3, last published: 5 months ago. Start using connected-react-router in your ...
Read more >
How to integrate Redux — with Next.js and SSR
getState() data to the returning value of 'getInitialProps', in the field “initialReduxState”. This field can now be used by the 'App' component ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found