Redux Provider包裹的App组件无法渲染是什么原因

你使用@reduxjs/toolkit提供的configureStore时传参格式错误，该API和原生Redux的createStore参数签名不一致，不支持(reducer, applyMiddleware(...))的传参形式，错误传参会导致store初始化失败，Provider组件接收到无效store时会中断子组件渲染。

• 调整configureStore入参为对象格式，不需要额外引入applyMiddleware，RTK内置了中间件配置能力，同时要保留RTK默认自带的中间件，避免丢失默认的状态校验能力：

const sagaMiddleWare = createSagaMiddleware();
const store = configureStore({
  reducer: reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleWare)
});
sagaMiddleWare.run(sagas);

• 检查sagas入口文件导出内容，确保导出值为合法的saga generator函数，sagaMiddleWare.run()接收到非generator值时会在初始化阶段抛出异常，阻塞渲染流程。

import React from 'react';
import ReactDOM from 'react-dom/client';
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import createSagaMiddleware from "redux-saga";
import { reducer } from "./Store/Reducer";
import { configureStore } from "@reduxjs/toolkit";
import sagas from "./Sagas";
import { Provider } from "react-redux";

const sagaMiddleWare = createSagaMiddleware();
const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleWare)
});
sagaMiddleWare.run(sagas);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

• 若调整配置后仍无法渲染，直接查看浏览器控制台抛出的错误信息：如果是saga执行阶段报错，检查saga内部effect（如takeEvery/takeLatest/call等）的写法是否正确，是否存在未捕获的运行时异常阻塞saga启动
• 确认项目中redux/react-redux/@reduxjs/toolkit/redux-saga版本兼容，跨大版本不匹配也会导致初始化异常

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