使用Redux Provider后出现store is undefined报错如何解决？

问题解决方法 #

错误原因 #

react-redux 提供的 <Provider> 组件要求必须显式传入 store 作为属性，你的代码未将 store 传给 Provider，反而传递给了 <App> 组件，导致 Provider 内部访问 store 时为 undefined，触发报错。

修复步骤 #

修改 index.js 中 ReactDOM.render 部分的代码：

// 原来的错误写法
ReactDOM.render(
  <Provider>
    <App store={store}/>
  </Provider>,
  document.getElementById('root')
);

// 修正后的写法
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

补充说明 #

修正后 Provider 会自动将 store 注入到整个组件树的上下文中，后代组件直接使用 useSelector、useDispatch 等 react-redux 提供的 API 即可访问 store 相关能力，不需要再手动逐层传递 store 属性。

内容的提问来源于stack exchange，提问作者Ritik Kumar