React+Django项目导入redux-thunk的thunk报错求助

第一步：修复redux-thunk导入错误 #

你遇到的导入错误是因为redux-thunk从v2.4.0版本开始使用命名导出，而非默认导出。修改导入语句即可解决编译错误：

import { legacy_createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
// 改为命名导入
import { thunk } from "redux-thunk";
import MainReducer from "./reducer/MainReducer";

const initialState = {}

const middleware = [thunk]

const Store = legacy_createStore(
    MainReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default Store;

第二步：排查导入后页面黑屏的原因 #

改成命名导入后出现黑屏，通常是代码运行时存在错误，按以下步骤排查：

• 打开浏览器开发者工具（F12），查看Console面板的报错信息，这是定位问题最快的方式
• 检查MainReducer是否正常：确保reducer函数无语法错误，且初始状态设置合理，避免返回undefined
• 确认根组件是否用Provider正确包裹Store：在index.js中需要引入Provider并传入Store，示例如下：

  import { Provider } from 'react-redux';
  import Store from './Store';
  
  ReactDOM.render(
    <Provider store={Store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );
  

• 检查redux-devtools-extension兼容性：若版本不匹配，可暂时去掉composeWithDevTools，直接用applyMiddleware(...middleware)测试是否能正常渲染
• 确认组件连接Redux的逻辑：比如使用useSelector获取状态时，是否访问了不存在的属性，或connect函数的参数是否写错

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