"context.store is undefined"

[ifeanyidavid]

I get the error: context.store is undefined Here's my code:

/* eslint-disable import/default */
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import 'antd/dist/antd.css';
import { ConnectedRouter } from 'connected-react-router';
import { Provider, ReactReduxContext } from 'react-redux';
import Root from './Root';
import './style.scss';
// import '../../fonts/index.css';
import configureStore, { history } from './store';
import './common.css';

const store = configureStore();

ReactDOM.render(
  <AppContainer>
    <Provider store={store} context={ReactReduxContext}>
      <ConnectedRouter history={history} context={ReactReduxContext}>
        <Root />
      </ConnectedRouter>
    </Provider>
  </AppContainer>,
  document.getElementById('app')
);

if (module.hot) {
  module.hot.accept('./Root', () => {
    const NewRoot = require('./Root').default;
    ReactDOM.render(
      <AppContainer>
        <NewRoot store={store} history={history} />
      </AppContainer>,
      document.getElementById('app')
    );
  });
}

[mjdavidson]

I'm getting this same issue except I'm not using context

[cdcasey]

I have the same issue with upgrading react-redux and redux-form in an existing code base and then migrating from react-router-redux to connected-react-router. Context is not being used anywhere in the app.

[cdcasey]

It actually looks like my issue may be using react-redux-ui-tools while trying to upgrade react-redux.

[elbaretto]

Experienced a similar issues. Someone seems to have documented it here: https://medium.com/@kenrimple/react-and-friends-are-sad-when-they-cant-play-together-or-the-story-of-connected-react-router-6e4b3870626d

Downgrading from react-redux 6.x.x to 5.x.x fixed the issues

[amratab]

Experienced a similar issues. Someone seems to have documented it here: https://medium.com/@kenrimple/react-and-friends-are-sad-when-they-cant-play-together-or-the-story-of-connected-react-router-6e4b3870626d

Downgrading from react-redux 6.x.x to 5.x.x fixed the issues

but the latest version of connected-react-router requires react-redux 6/7

[amratab]

Still experiencing this issue with connected-react-router v. 6.5.2 , react-redux v. 6.0.0, and react v. 16.6.3. Is it resolved?

[cdcasey]

Our current stack has connected-react-router v. 6.5.2, react-redux v. 7.1.0, and react v. 16.8.6. and everything works great.

We also had an issue with a library called react-redux-ui-tools, so we switched to one called react-redux-ui-state and it works as well.

[amratab]

@cdcasey I updated to all the versions as you have mentioned in your comment, but still the issue persists.

My code is as following:

index.js

export const history = createBrowserHistory()

const configureStore = (railsProps) => {
  const initialState = {
    ...initialStates,
    page: {...initialStates.page, ...railsProps
    }
  }
  return (createStore(
          createRootReducer(history), // root reducer with router state
          initialState,
          compose(
              applyMiddleware(
                  routerMiddleware(history), thunkMiddleware, loggerMiddleware)
          )
      )
  )
}


export default configureStore

App.jsx

const App = (props) => {
  return (
    <Provider store={configureStore(props)} context={ReactReduxContext}>
      <ConnectedRouter history={history} context={ReactReduxContext}>
        <Switch>
          <Route path="/" render={() => (<PageContainer />)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </ConnectedRouter>
    </Provider>
  )
}

export default App

[andrew-aladev]

Of course you won't be able to access store from context without special dirty hacks like useStore. connected-react-router has the following dependency:

"react-redux": "^6.0.0 || ^7.1.0"

It means that connected-react-router is missing the only one stable react-router v5.x.

[andrew-aladev]

We can see that react-redux is not able to provide stable public api that may be used both in connected-react-router and regular react application.

I want to recommend authors of connected-react-router to remove react-redux from dependencies and link it directly to redux. Why? This package requires only 5% of react-redux functionality.

@supasate please consider remove react-redux dependency in future, thank you.