使用react-redux的useSelector时报Illegal constructor错误如何解决？

核心原因 #

你出现 TypeError: Illegal constructor 报错的根本原因是向Redux的Provider组件传递了未执行的createStore函数本身，而非调用createStore后生成的store实例。

你当前的store.js导出的是一个生成store的工厂函数，不是直接的store实例，所以在入口文件（如index.js/main.jsx）挂载Provider的时候，大概率是错误写法：

// 错误写法示例
import createStore from './store'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={createStore}> {/* 这里传了函数本身，不是实例 */}
    <PersistGate loading={null} persistor={createStore.persistor}>
      <App />
    </PersistGate>
  </Provider>
)

这会导致Redux内部尝试构造store相关实例时调用失败，抛出非法构造函数的报错。

修复方案 #

步骤1：调用createStore拿到store和persistor实例 #

在入口文件先执行createStore()，拿到返回的store和persistor对象再传递给对应组件：

// 正确写法
import createStore from './store'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'

const { store, persistor } = createStore() // 先执行函数生成实例

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}> {/* 传生成的store实例 */}
    <PersistGate loading={null} persistor={persistor}> {/* 传生成的persistor实例 */}
      <App />
    </PersistGate>
  </Provider>
)

其他可选排查点 #

如果修改后还有报错，可以检查以下两点：

• 确认依赖版本兼容：@reduxjs/toolkit v1.9+ 搭配 redux-persist v6.x 版本无兼容问题，若版本差距过大建议调整到匹配版本
• 你现有写法里的useSelector调用、reducer逻辑、持久化配置都没有问题，不需要修改

额外优化建议（非必须） #

你在slice里定义的reducer函数名process和slice的nameprocess重名，虽然不影响运行，但建议修改为语义更明确的名称比如setLoginInfo，避免后续调用action时混淆。

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