本文介绍了找不到“商店"，即使根被包裹在提供者中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 SSR react-redux 应用程序.我有主要的 index.js 文件，包括 App 组件包裹在 Provider 中.
I have an SSR react-redux app. Where I have the main index.js file including the App Component wrapped in Provider.
但是如果我尝试在 App 组件中使用 connect 它会抛出这个错误:
But If I try to use connect in the App component it throws this error:
Uncaught Invariant Violation: Could not find "store" in the context of "Connect(App)"
我已经查看了这些解决方案，但没有一个与我相关.
I've already checked out these solutions, and none is relevant to me.
// 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;
这是浏览器控制台的完整错误
Here's the complete error from browser's console
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
推荐答案
从堆栈跟踪来看，您似乎正在渲染 App.但是，App 由 Provider 包装在您创建的名为 app 的新组件中.因此，当您尝试渲染 App 时，react-redux 会正确地让您知道 App 没有与之关联的 store.
From the stack trace, it appears you're rendering App. However, App is wrapped by a Provider within a new component you're creating called app. Thus, when you try to render App, react-redux is correctly letting you know that App doesn't have a store associated with it.
例如，你应该这样写:
const MyAppWithStore = () => (
<Provider store={store}>
<App />
</Provider>
);
ReactDOM.render(<MyAppWithStore />, document.getElementById('root'));
我在您发布的代码中没有看到您实际渲染根组件的位置，因此以上只是您需要调整的示例.
I don't see in your posted code where you're actually rendering the root Component, so the above is just an example that you will need to adapt.
这篇关于找不到“商店"，即使根被包裹在提供者中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！