Редакция Uncaught Invariant Violation: не удалось найти «хранилище» в контексте

Question

Я пытаюсь реализовать избыточность в этом компоненте, но я получаю следующую ошибку, как я могу это сделать?

ошибка, которую он мне показывает, следующая:

Неучитанное нарушение инварианта: может не найти "store" в контексте "Connect (App)". Либо оберните компонент root в a, либо передайте пользовательский поставщик контекста React соответствующему потребителю контекста React в Connect (App) в параметрах соединения.

Я знаю, что это можно сделать таким образом, но Я не хочу вставлять хранилище в компонент

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);

Answer 1

Если вы хотите, чтобы ваш компонент App был подключен к хранилищу резервов, вам нужно обернуть компонент App <Provider>.

Например - это можно сделать с родительским компонентом App, т. Е. index.js:

index. js

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

Компонент приложения

...
render() {
    return (
        <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>
    );
  }
...