how to implement the new react-redux v6.0.0

Question

i was trying to migrate react-redux v5.X.X to v6.0.0 and there dosent seem to be any documentation for it. i am using following versions : "react": "^16.4.2" "redux": "^4.0.0" "react-redux": "^6.0.0"

the official change log says.

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

here is my root index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { configureStore, history } from './Store';
import App from './App.hot';

import 'antd/dist/antd.min.css';
const reduxStore = configureStore();
ReactDOM.render(<App store={reduxStore} history={history} />, document.getElementById('root'));

here is my app.jsx (root component)

import React from 'react';
import PropTypes from 'prop-types';
import { Provider, connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ConnectedRouter } from 'connected-react-router';
import Layout from './Layout';

class App extends React.Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        // what i understand from change log is this part 
        // i need to pass context instead of store as props. 
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }
}


function mapStateToProps(store) {
  return {
    ...
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    ...
  }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

as per change log i created context and passed it down to the provider

 const storeContext = React.createContext(reduxStore);

here is my render function after that change

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        <Provider context={storeContext}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }

passing store as props to provider gives following error

Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect

and passing as context gives following error

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

i did not find any documentation expect this redux history document here it tells all the problems and solutions for the problem in react-redux and how the context api fixed it. but i am not sure how to actually implement it in real project.

did anyone face the same issue ? or can you please tell me how exactly to implement this change.

thanks

Ruble

can you share also your Store.js? – Shoelace

there are no changes in redux api. only react-redux has changed. i dont think there is a need to share store @Shoelace – Ruble

I'm having the same problem as you. I managed to achieve this: const customContext = React.createContext(null); ... <Provider context={customContext} store={store}> <ConnectedRouter context={customContext} history={history}> However I keep getting errors for the following child components that also need access to customContext. Have you made any progress on this? – Bostick

@user3632710 react-redux repo says they are updating docs. so i am waiting for that. for now i m using prev working version of react-redux – Ruble

@hannad rehman ok thanks :) – Bostick

@user3632710 i got it working – Ruble

Answer 1

I was able to solve the problem by actually listening to what the error message said.

there were two problems with my code

1. i was passing store as props to my <App /> component. which is why the first warning/error message was comming.

Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect

to fix this simply dont pass whole redux store as props to any component

2. my Provider from react-redux was not the root component. the error message said

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 and the corresponding React context consumer to Connect(App) in connect options

so i followed the second wanring in the sentence

Either wrap the root component in a Provider , or pass a custom React context

so i wrapped my main root in provider. and things started working well.

ReactDOM.render(
  <Provider store={reduxStore}>
    <App />
  </Provider>, document.getElementById('root'),
);

Ruble

But in my case, the error remains even on wrapping the root component in <Provider />. Any other suggestions? – Retractor

Answer 2

I had the same problem and this is how i solved it.

const MyContext = React.createContext();

class App extends Component {
  render() {
    return (
      <Provider store = {store} context={MyContext}>
        <BrowserRouter>
          <div>
            <Main context={MyContext}/>
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

Hydatid