React Native中Redux Thunk用extraReducers改状态报Immer错误如何解决

解决方案 #

1. 替换Store创建方式（核心修复） #

你当前使用Redux旧版createStore手动注入中间件的写法，会丢失Redux Toolkit默认集成的Immer处理、可序列化校验等必要逻辑，是触发本次错误的核心原因。请替换为RTK官方推荐的configureStore创建Store，同时适配Redux Persist的配置：

import { configureStore } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage'
import questionReducer from './questionSlice'

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, questionReducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      // 忽略Redux Persist相关动作的可序列化检查
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

export const persistor = persistStore(store)

如果需要保留combineReducers的写法，修改对应配置即可，注意不要重复嵌套state层级。

2. 修正extraReducers语法 #

你原有代码中builder.addCase之间多余的逗号会破坏链式调用逻辑，导致Immer代理状态异常，修正为链式调用写法：

extraReducers: (builder) => {
  builder
    .addCase(fetchQuestions.pending, (state) => {
      state.status = 'loading'
    })
    .addCase(fetchQuestions.fulfilled, (state, action) => {
      state.status = 'succeeded'
      // 确认接口返回的是数组结构，如果是外层包裹对象请取对应字段
      state.questions = state.questions.concat(action.payload)
    })
    .addCase(fetchQuestions.rejected, (state, action) => {
      state.status = 'failed'
      state.error = action.error.message
    })
}

3. 清理历史缓存 #

修改代码后请卸载App或清空App本地存储，避免之前持久化的异常状态恢复后继续触发错误。

4. 版本兼容校验 #

确保@reduxjs/toolkit版本≥1.8.0，redux-persist版本≥6.0.0，避免已知版本兼容问题。

可选排查步骤 #

如果修改后仍然报错，可以先临时注释Redux Persist相关代码，直接用原始reducer创建Store，验证是否是持久化逻辑导致的状态异常：

// 临时测试用，验证非持久化场景是否正常
const store = configureStore({
  reducer: questionReducer
})

如果测试正常，说明是持久化配置问题，可重新检查persistConfig的参数是否正确。

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