切换React Redux为Redux Toolkit时出现t is not a function报错如何解决

错误根因 #

你遇到的报错是两处configureStore的API用法错误导致的：

• 第一处是persistReducer传参不符合要求：persistReducer第二个参数必须传入一个 reducer 函数，你直接传入了{reducer: {loginReducer, signupReducer, paymentReducer}}这个配置对象，Redux 内部尝试调用 reducer 执行状态更新时，就会抛出「对象不是函数」的报错。
• 第二处是中间件配置逻辑错误：getDefaultMiddleware的入参是配置对象，你直接把自定义中间件数组展开到了配置对象里，完全不符合API规则，也会引发内部执行异常。

修复方案 #

步骤1：导入combineReducers合并子reducer #

你需要先把多个子reducer合并为单个根reducer函数，再传给persistReducer做持久化包装。

步骤2：修正中间件拼接逻辑 #

调用getDefaultMiddleware得到默认中间件数组后，用concat方法拼接你自定义的saga、logger中间件。

修改后完整configureStore.js代码： #

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import {  persistStore,  persistReducer,  FLUSH,  REHYDRATE,  PAUSE,  PERSIST,  PURGE,  REGISTER,} from 'redux-persist'
import AsyncStorage from '@react-native-community/async-storage';
import { createLogger } from 'redux-logger';
import createSagaMiddleware from 'redux-saga';

//import sagas from 'app/sagas';
import {
  loginReducer,
  paymentReducer,
  signupReducer
} from '../reducer';

const config = {
  key: 'root',
  storage: AsyncStorage,
  blacklist: ['loadingReducer'],
  debug: true, //to get useful logging
};

const middleware = [];
const sagaMiddleware = createSagaMiddleware();
middleware.push(sagaMiddleware);

if (__DEV__) {
  middleware.push(createLogger());
}

// 合并子reducer为根reducer函数
const rootReducer = combineReducers({
  loginReducer,
  signupReducer,
  paymentReducer
})
// 给根reducer加持久化包装
const persistedReducer = persistReducer(config, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
      thunk: false,
    // 用concat拼接自定义中间件
    }).concat(middleware),
})

// 取消注释即可运行saga
// sagaMiddleware.run(sagas);

let persistor = persistStore(store);
const myStore = () => {
  return { persistor, store };
};

export default myStore

验证步骤 #

修改代码后先清空App本地存储，清除旧的持久化缓存后再重启应用，即可解决报错。

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