Skip to content

Value is Undefined in SSR of React-Redux v6 #1107

Closed
@sinwailam193

Description

@sinwailam193

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions