即使根被包裹在提供者中

即使根被包裹在提供者中

关注
发信
关注(28)粉丝(399)

找不到“商店"，即使根被包裹在提供者中

本文介绍了找不到“商店"，即使根被包裹在提供者中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 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.

相关 01

相关 02

相关 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;

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

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.

这篇关于找不到“商店"，即使根被包裹在提供者中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-21 08:53
Powered by LMLPHP ©2024 即使根被包裹在提供者中 0.039626