Redux Toolkit报uSES not initialized错误 计数器加减功能异常

问题背景 #

实现计数器递增（increment）、递减（decrement）功能时，组件渲染阶段抛出Uncaught Error: uSES not initialized错误，相关代码结构如下：

• counterReducer.js：从@reduxjs/toolkit引入createSlice创建counter切片，初始状态value为0，配置increment、decrement、incrementByAmount三个reducer处理状态更新，导出对应action与默认reducer。
• store.js：从@reduxjs/toolkit引入configureStore创建store实例，将counterReducer挂载到store的counter状态节点。
• 入口文件index.js：从react-redux/es/exports引入Provider组件，包裹App根组件并传入配置好的store实例。
• Home.js组件：从react-redux/es/exports引入useSelector、useDispatch钩子，从counterReducer文件引入increment action，通过useSelector读取counter状态，通过useDispatch派发事件实现计数更新。

根因分析 #

报错由两个常见问题触发：

1. 错误的深层路径导入：直接从react-redux/es/exports这类内部构建路径导入API，会跳过React-Redux内部的hooks上下文初始化流程，直接触发uSES（Redux内部hooks状态标记）未初始化的报错。
2. 版本不兼容：如果使用React 18搭配7.x版本的react-redux，或者依赖版本存在多实例冲突，也会触发同类hooks初始化异常。

修复方案 #

1. 替换所有深层路径导入，统一从react-redux包根路径导入API：

// 错误导入方式
// import { Provider } from 'react-redux/es/exports'
// import { useSelector, useDispatch } from 'react-redux/es/exports'

// 正确导入方式
import { Provider, useSelector, useDispatch } from 'react-redux'

2. 对齐依赖版本，消除兼容性问题：
   React 18项目执行以下命令升级到适配版本：

npm i react@^18.2.0 react-dom@^18.2.0 @reduxjs/toolkit@^1.9.7 react-redux@^8.1.3

React 17项目将react-redux版本锁定为7.2.9即可，不要使用8.x版本。
3. 校验Provider包裹范围，确保所有调用Redux hooks的组件都在Provider的作用域内，标准入口写法参考：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'

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

不要在Provider包裹层级之外的组件中调用useSelector、useDispatch等Redux hooks，否则也会触发上下文找不到的同类报错。

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