Connected-react-router: Support React-Redux v6.

[wgao19]

React-Redux v6 will use React's ( new ) context api which is not compatible with the legacy context API. By accessing store from context ( reference ) it causes the app to break when it tries to dispatch the LOCATION_CHANGE action.

As @timdoor has described in its breaking changes:

Passing store as a prop to a connected component is no longer supported. Instead, you may pass a custom context={MyContext} prop to both <Provider> and <ConnectedComponent>. You may also pass {context : MyContext} as an option to connect.

Related React-Redux links:

• Pre-Release Tag v6.0.0-beta.1
• Use React.createContext() by @cellog #1000

[BiosBoy]

Same issue here! There is a problem with how to bring react-redux 6*.beta and connected-react-router 5* work together. I gets an error about missing context store object in ConnectedRouter each time when trying to start my project...

[Jessidhia]

That'll require a breaking change / major version. connected-react-router needs to look into react-redu x's context but it's been moved from old context to new context.

[wgao19]

Pulling up a fix for my own usage that here may refer to

[supasate]

Based on @wgao19's fix, I made a PoC in #191. Please check it out and let me know what you all think.

Update: I just published it as connected-react-router@next (v6.0.0-beta.1).

[bugzpodder]

Thanks for the awesome work!
react-redux just released the final version of v6: https://github.com/reduxjs/react-redux/releases/tag/v6.0.0
Gonna give the connected-react-router@next branch a try later to see how it works out together!

[kaigouthro]

thows hands up... damnit!... i just got the notice from greenskeeper on the boilerplate i grabbed and cleaned up. it's too big to go through and update to redux 6, and i just spent 40 hours on a new boilerplate centered on connected-react-router and redux 5. there goes all that work.

any viable redux 6 ready alternatives, someone let me know, please.

[ahce]

connected-react-router 6.0.0-beta.1 works for me with react-redux 6.0.0

[kaigouthro]

oh! lovely.. thanks.

[Ariex]

this problem been bug me for a while, finally find the solution, thanks!

[samuelpena]

Worked for me as well! Thanks!

[johnryan]

I tried setting this up with 6.0.0-beta1 like so:

const routerContext = React.createContext(null);
export default class Root extends React.Component<RootType, {}> {

  render() {
    return (
      <Provider store={this.props.store} context={routerContext}>
        <div>
          <GlobalStyle />
          <ConnectedRouter history={this.props.history} context={routerContext}>
            <App />
          </ConnectedRouter>
        </div>
      </Provider>
    );
  }
}

but still seeing the error:
Uncaught Error: Could not find "store" in the context of "Connect(App)". 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(App) in connect options.

Is there another step that's missing here other than passing the context to ConnectedRouter?

[bugzpodder]

I upgraded to react-redux v6 and connected-react-router v6 and everything worked.

[kaigouthro]

i've got this >

import React from 'react';
import ReactDOM from 'react-dom';
import { combineReducers } from 'redux';
import { createBrowserHistory } from 'history';
import { AppContainer } from 'react-hot-loader';
import { PersistGate } from 'redux-persist/integration/react';
import { fbContext } from '@root/actions/Firebase/fbContext';
import configureStore from '@root/store/configureStore';
import { BrowserHistory } from 'connected-react-router';
import { Firebase } from '@root/actions/Firebase';
import { ReduxConfig } from '@root/controllers/store/createStore';
import rootReducer from '@root/controllers/reducers/reducersducers';
import * as serviceWorker from './serviceWorker';
import App from '@root/App';

const { initialState } = configureStore(ReduxConfig);
const { persistor } = configureStore(BrowserHistory);
const store = combineReducers(rootReducer, persistor, initialState);
const history = createBrowserHistory();

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <PersistGate loading={null} store={store} persistor={persistor}>
        <fbContext.Provider store={store} firestore={new Firebase()}>
          <App store={store} routes={routes} />
        </fbContext.Provider>
      </PersistGate>
    </AppContainer>,
    document.getElementById('react-root')
  );
};


  //  serviceWorker.register();

wrapped around this >>>

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider, render } from 'react-redux'
import Appz from './Appz'

import { store, history } from '../index'

export default class App {
  render = ({ store, history } = ((
    <AppContainer history={history} store={store}>
      <Appz />
    </AppContainer>
  ),
  document.getElementById('react-root')))
}

wrapped around this..

/* eslint-disable no-unused-vars */
import { Container, Divider, Message, Segment } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import React from 'react'
import { renderRoutes } from 'react-router-config'
// import Helmet from 'react-helmet';
// import '../styles/semantic.less';
// Import { Notifs } from '@root/assets/modules';
// import '../styles/heading.less'
import { ConnectedRouter, Route, Switch } from 'connected-react-router'
import mainNav from '../controllers/mainNav'


export const Appz = ({ routes, store, history }) => (
  <ConnectedRouter history={history}>
    <div>
      <mainNav>
        <Switch>
          <Route exact path="/" render={() => <div>Match</div>} />
          <Route render={() => <div>Miss</div>} />
        </Switch>
      </mainNav>
    </div>
  </ConnectedRouter>
)

Appz.propTypes = {
  history: PropTypes.element.isRequired,
  routes: PropTypes.element.isRequired,
  store: PropTypes.element.isRequired
}

export default Appz

wroking.

ihave a couple things turned off, in super dev mode right now... took 6 different starters and boilerplates and mashed them together with 10 different tutorials.. it's getting pretty savage... when done, it'll be the scaffolding for super-projects.... like... really really ambitious builds.. code splitting, SSR, loadable components and hot reducer reloading, tons of dev tools, local and cloud noSQL, socket.io api client..

thios router is just right and tight and appears to work with nesting.. going to be important when i set up sub routers...

but yes... it Works.

[supasate]

Connected React Router v6.0.0 has been released!