I am trying to implement redux in this component but I get the following error how could I do this?
the error it shows me is the following:
Uncaught Invariant Violation: 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 know it is possible to do it this way but I don't want to inject the store into the component
store.dispatch(doResetStore());
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import environment from '../../commons/enviroment.const';
import Loader from '../loader/Loader';
import {connect} from "react-redux";
import store from '../../store/store';
import { routes as routesConst, context } from '../../commons/routes/routes.const';
import PropTypes from 'prop-types';
import MandateConsulting from '../mandate-consulting/MandateConsulting';
import { doResetStore } from '../../store/config/actions/actions';
class App extends Component {
componentWillMount(){
this.props.doResetStore();
}
render() {
return (
<Provider store={store}>
<BrowserRouter basename={context()}>
<div id={environment.appName} className="ui-kit-reset">
<Loader />
<Switch>
<Route exact path={routesConst.etd} component={MandateConsulting} />
<Route exact path={routesConst.default} component={MandateConsulting} />
</Switch>
</div>
</BrowserRouter>
</Provider>
);
}
}
App.propTypes = {
reset: PropTypes.any,
doResetStore: PropTypes.any,
};
export const mapStateToProps = state => ({
reset: state.config.reset
});
export const mapDispatchToProps = (dispatch) => ({
doResetStore: () => dispatch(doResetStore()),
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
Please login or Register to submit your answer