React组件无法访问Redux Store 问题排查求助

你遇到的这个错误核心原因是你的根组件没有被Redux的<Provider>包裹，具体是因为MainApp.js里的导出逻辑出现了致命错误。

问题定位 #

仔细看你的MainApp.js代码：你明明定义了包裹<Provider>和<ConnectedRouter>的MainApp组件，但最后一行却错误地导出了导入的App：

export default App;

而你的index.js里渲染的是MainApp，这意味着实际上渲染的是containers/app.js里的App组件——完全没有经过Redux Provider的包裹！所以DataViewer作为connect高阶组件包裹的组件，自然找不到Redux Store的上下文。

修复步骤 #

修改MainApp.js的最后一行，把导出的App改成你定义的MainApp组件：

// MainApp.js
// ... 其他代码 ...
const MainApp = () => <Provider store={store}>
  <ConnectedRouter history={history}>
    <Switch>
      <Route path="/" component={App}/>
    </Switch>
  </ConnectedRouter>
</Provider>;
// 把下面这行的App改成MainApp
export default MainApp;

修复逻辑验证 #

修改后，index.js渲染的MainApp会是包裹了<Provider store={store}>的根组件，整个路由下的App组件（包括它内部的DataViewer）都会处于Redux的上下文环境中，connect(DataViewer)就能正常获取到Store了。

额外小细节提示 #

另外注意下，你的DataViewer里的DisplayControllers和DisplayComponent作为类的方法，在JSX里使用时建议遵循JS规范（方法名小写），或者直接定义为独立的函数组件，比如：

// 把类方法名改为小写，符合JS命名规范
displayControllers = () => {
  // ... 原有代码 ...
}

// 渲染时使用
<this.displayControllers />

内容的提问来源于stack exchange，提问作者HuLu ViCa