React-Redux 和材料 UI：组件未将存储传递给“已连接”子级

Question

重复代码沙箱https://ndg6d.csb.app/

完全错误Uncaught Error: Could not find "store" in the context of "Connect(UploadInternal)". 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(UploadInternal) in connect opt. Uncaught Error: Could not find "store" in the context of "Connect(UploadInternal)". 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(UploadInternal) in connect opt.

情况一切正常，然后将 react 15.x 更新为 16.13.x，并将 react-redux 从 5.x 更新为 7.2.x，现在当连接的组件作为子组件传递给Upload.jsx中的Dialog组件时，会发生上述错误。 Upload.jsx 如果商店没有嵌套在Dialog中，它会正确传递给子组件。 我正在使用一个非常旧版本的 Material UI (v0.20.2)，但它是package.json文件将依赖关系react和react-dom列为^16.0.0 ，所以应该没问题。

Answer 1

如果您还没有这样做，请将此代码添加到 index.js：

import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "./store/reducers";

const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f;

const store = createStore(rootReducer,compose(applyMiddleware(thunk),composeEnhances));

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

减速器 index.js 文件如下：

import { combineReducers } from 'redux';
import rootReducer from "../components/app/reducers";

export default combineReducers({
// your reducers here
root: rootReducer,
});

Answer 2

我相信这是由过时的MaterialUI组件引起的，该组件在此处提到的上下文之外创建了一个弹出框。 嵌套在MaterialUI组件Dialog中的子项会抛出错误。 但是，如果孩子没有嵌套在Dialog中，那么它可以访问商店。 这表明根、它的子、孙都可以访问存储，并表明Dialog在这种情况下导致了边界中断。