javascript - redux Uncaught Invariant Violation：在上下文中找不到“商店”

Question

我正在尝试在此组件中实现 redux，但出现以下错误，我该怎么做？

它向我显示的错误如下：

Uncaught Invariant Violation：在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 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);

标签： javascriptreactjsreduxreact-redux

Answer 1

如果你想让你的App组件连接到 redux 存储，你需要App用<Provider>.

例如 - 可以使用Appie的父组件来完成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>
    );
  }
...