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在這種情況下導致了邊界中斷。