找不到“store”，即使root被包装在Provider中

Question

我有一个SSR react-redux应用程序。我有主要的index.js文件，包括用App包装的Provider组件。

但是，如果我尝试在App组件中使用connect，则会抛出此错误：

Uncaught Invariant Violation: Could not find "store" in the context of "Connect(App)"

我已经检查了这些解决方案，没有一个与我相关。

related 01

related 02

related 03

// index.js
import React from 'react';
import { Provider } from 'react-redux';
import App from './App';
import configureStore from './store/configureStore';

const store = configureStore();

const app = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default app;

// App.js
import React, { Component } from 'react'
import { connect } from 'react-redux'

class App extends Component {
  render() {
    return (
      ...
    );
  }
};

const mapStateToProps = state => {
  return state;
};

export default connect(mapStateToProps,{})(App);

// configureStore.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import login from './login/reducer.js';

const configureStore = () => {
  const rootReducer = combineReducers({
    login
  });

  const composeEnhancers =
    process.env.NODE_ENV !== 'production' && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      : compose;

  const store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk)));
  return store;
};

export default configureStore;

// login/reducer.js

const initialState = { user: {} };

const currentUser = (state = initialState, action) => {
  const { type, payload } = action;
  switch (type) {
    default: {
      return state;
    }
  }
};

export default currentUser;

这是浏览器控制台的完整错误

Uncaught Invariant Violation: 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 <Provider> and the corresponding React context consumer to Connect(App) in connect options.
    at invariant (http://localhost:3000/bundle.js:146050:15)
    at Connect.renderWrappedComponent (http://localhost:3000/bundle.js:51859:58)
    at Connect.indirectRenderWrappedComponent (http://localhost:3000/bundle.js:51855:21)
    at updateContextConsumer (http://localhost:3000/bundle.js:70185:938)
    at beginWork (http://localhost:3000/bundle.js:70212:2189)
    at performUnitOfWork (http://localhost:3000/bundle.js:70889:349)
    at workLoop (http://localhost:3000/bundle.js:70896:45)
    at HTMLUnknownElement.callCallback (http://localhost:3000/bundle.js:67381:102)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/bundle.js:67401:45)
    at invokeGuardedCallback (http://localhost:3000/bundle.js:67417:126)
invariant @ bundle.js:146050
renderWrappedComponent @ bundle.js:51859
indirectRenderWrappedComponent @ bundle.js:51855
updateContextConsumer @ bundle.js:70185
beginWork @ bundle.js:70212
performUnitOfWork @ bundle.js:70889
workLoop @ bundle.js:70896
callCallback @ bundle.js:67381
invokeGuardedCallbackDev @ bundle.js:67401
invokeGuardedCallback @ bundle.js:67417
replayUnitOfWork @ bundle.js:70757
renderRoot @ bundle.js:70918
performWorkOnRoot @ bundle.js:71100
performWork @ bundle.js:71082
performSyncWork @ bundle.js:71080
requestWork @ bundle.js:71056
scheduleWork @ bundle.js:71002
scheduleRootUpdate @ bundle.js:71138
updateContainerAtExpirationTime @ bundle.js:71139
updateContainer @ bundle.js:71139
ReactRoot.render @ bundle.js:71169
(anonymous) @ bundle.js:71182
unbatchedUpdates @ bundle.js:71126
legacyRenderSubtreeIntoContainer @ bundle.js:71182
hydrate @ bundle.js:71185
(anonymous) @ bundle.js:57511
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:52705
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:63
(anonymous) @ bundle.js:66
bundle.js:67495 Warning: Did not expect server HTML to contain a <div> in <div>.
warningWithoutStack @ bundle.js:67495
warnForDeletedHydratableElement @ bundle.js:69163
didNotHydrateContainerInstance @ bundle.js:69265
deleteHydratableInstance @ bundle.js:69882
popHydrationState @ bundle.js:69912
completeWork @ bundle.js:70494
completeUnitOfWork @ bundle.js:70849
performUnitOfWork @ bundle.js:70895
workLoop @ bundle.js:70896
renderRoot @ bundle.js:70911
performWorkOnRoot @ bundle.js:71100
performWork @ bundle.js:71082
performSyncWork @ bundle.js:71080
requestWork @ bundle.js:71056
scheduleWork @ bundle.js:71002
scheduleRootUpdate @ bundle.js:71138
updateContainerAtExpirationTime @ bundle.js:71139
updateContainer @ bundle.js:71139
ReactRoot.render @ bundle.js:71169
(anonymous) @ bundle.js:71182
unbatchedUpdates @ bundle.js:71126
legacyRenderSubtreeIntoContainer @ bundle.js:71182
hydrate @ bundle.js:71185
(anonymous) @ bundle.js:57511
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:52705
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:63
(anonymous) @ bundle.js:66
bundle.js:70552 The above error occurred in the <Context.Consumer> component:
    in Connect(App)
    in Router (created by BrowserRouter)
    in BrowserRouter

Answer 1

从堆栈跟踪中，您似乎正在渲染App。然而，App被一个Provider包裹在你正在创建的一个名为app的新组件中。因此，当你尝试渲染App时，react-redux正确地让你知道App没有与之相关的store。

例如，你应该这样写：

const MyAppWithStore = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

ReactDOM.render(<MyAppWithStore />, document.getElementById('root'));

我没有在你发布的代码中看到你实际渲染根组件，所以上面只是一个你需要适应的例子。