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

Question

Duplicated Code Sandbox https://ndg6d.csb.app/

Full Error 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.

Situation Everything was working correctly, then updated react 15.x to 16.13.x, and react-redux from 5.x to 7.2.x, and now the error above occurs when a connected component is passed as a child to the Dialog component in Upload.jsx . The store is passed correctly to the child component if it's not nested in Dialog . I am using a very old version of Material UI (v0.20.2), but it's package.json file lists both dependencies react and react-dom as ^16.0.0 , so it should be ok.

Answer 1

Add this code to the index.js if you haven't done that:

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>
);

the reducer index.js file would be like:

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

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

Answer 2

I believe this is caused by an outdated MaterialUI component that's creating a popover outside the context as mentioned here . The child nested in the MaterialUI component Dialog throws the error. However, if the child is not nested in Dialog , then it has access to the store. This shows that the root, its children, and grandchildren have access to the store, and shows Dialog causes the breaking boundary in this situation.