React-Redux 6 error: Passing redux store in props has been removed and does not do anything

Question

My react app is throwing the following error and as I have only a couple of weeks in react and even less in redux and I don't know how to overpass it. I tried different answers from the web but didn't manage to make it work. Maybe some of you can help.

The 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

The code looks like this

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.css'
import 'bootstrap-social/bootstrap-social.css'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigureStore } from './redux/configureStore';
const store = ConfigureStore();

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

Reducer.js:

import { DISHES } from '../shared/dishes';
import { COMMENTS } from '../shared/comments';
import { PROMOTIONS } from '../shared/promotions';
import { LEADERS } from '../shared/leaders';
export const initialState = {
dishes: DISHES,
comments: COMMENTS,
promotions: PROMOTIONS,
leaders: LEADERS
};
export const Reducer = (state = initialState, action) => {
return state;
};

configureStore.js

import { createStore } from 'redux';
import { Reducer, initialState } from './reducer';
export const ConfigureStore = () => {
const store = createStore(
Reducer, // reducer
initialState, // our initialState
);
return store;
}

MainComponent.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Header from './HeaderComponent'
import Footer from './FooterComponent'
import DishDetail from './DishdetailComponent'
import About from './AboutComponent';
import Home from './HomeComponent';
import Contact from './ContactComponent';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'
import { connect } from 'react-redux';

const mapStateToProps = state => {
return {
dishes: state.dishes,
comments: state.comments,
promotions: state.promotions,
leaders: state.leaders
}
}
class Main extends Component {
render() {
const HomePage = () => {
return (
<Home
dish={this.props.dishes.filter((dish) => dish.featured)[0]}
promotion={this.props.promotions.filter((promo) => promo.featured)[0]}
leader={this.props.leaders.filter((leader) => leader.featured)[0]}
/>
);
}
const DishWithId = ({ match }) => {
return (
<DishDetail dish={this.props.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}
comments={this.props.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))} />
);
};
return (
<div>
<Header />
<div>
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
<Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
<Route path='/menu/:dishId' component={DishWithId} />
<Route exact path='/contactus' component={Contact} />} />
<Redirect to="/home" />
</Switch>
</div>
<Footer />
</div>
);
}
}
export default withRouter(connect(mapStateToProps)(Main));

Answer 1

The package that you are using for handling forms- 'react-redux-form' is currently facing issues with React 6. It is currently in maintenance mode.

You can either use alternatives like Formik or downgrade to a stable version of 'React' and 'react-native-form'.

Hope this helps :)