React-Redux报错：找不到store，求助排查导出语句问题

嘿，这个问题我太熟了！你遇到的是React-Redux最常见的入门问题之一——connect(App)找不到Redux store的上下文，本质原因是你的根组件没有被<Provider>组件包裹，导致connect高阶组件无法从React上下文中获取到store实例。你怀疑export语句有问题，其实问题的核心不在export本身，而是缺少了Provider这关键一步。

具体解决步骤： #

1. 确保你有配置好的Redux Store
   首先你需要一个创建好的store实例（通常会单独放在store.js文件里），比如：

   // src/store.js
   import { createStore } from 'redux';
   import rootReducer from './reducers'; // 你的合并后的根reducer
   
   // 创建store实例
   export const store = createStore(rootReducer);
   

2. 用<Provider>包裹根组件
   找到你的应用入口文件（一般是index.js），导入Provider和刚才创建的store，然后把你的App组件（不管有没有被connect包裹）整个包裹在<Provider>里：

   // src/index.js
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { Provider } from 'react-redux';
   import { store } from './store';
   import App from './App';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );
   

3. 检查你的App组件export语句
   确保你的App组件正确通过connect连接Redux，末尾的export应该是这样的：

   // src/App.js 末尾
   import React, { Component } from 'react';
   import { connect } from 'react-redux';
   import { bindActionCreators } from 'redux';
   import { addReminder } from '../actions';
   
   class App extends Component {
     // 你的组件逻辑...
     constructor(props){
       super(props);
       this.state = {}; // 你的state定义
     }
     // ...其他方法
   }
   
   // 映射dispatch到props
   const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({ addReminder }, dispatch);
   };
   
   // 连接组件与Redux
   export default connect(null, mapDispatchToProps)(App);
   

额外说明： #

• 不要尝试直接把store作为props传给connect(App)，这种方式不推荐，而且会让组件依赖变得冗余。<Provider>的作用就是把store注入到整个React组件树的上下文中，所有被connect包裹的组件都能自动获取到store。
• 如果你的项目用的是Redux Toolkit（现在推荐的Redux写法），步骤类似，只是创建store的方式变成configureStore，但Provider的用法完全一致。

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