使用 redux 设置 Reactotron，存储未定义

Question

我正在尝试使用 Reactotron 查看我的 redux 状态，但出现错误：

类型错误：无法读取未定义的属性“存储”

有人可以帮忙吗？

配置：

import Reactotron from 'reactotron-react-native';
import {
  QueryClientManager,
  reactotronReactQuery,
} from 'reactotron-react-query';
import { reactotronRedux } from 'reactotron-redux';

import { queryClient } from '@/api/config';

const queryClientManager = new QueryClientManager({
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  queryClient,
});
const reactotron = Reactotron.use(reactotronReactQuery(queryClientManager))
  .configure({
    name: 'myRAC',
    onDisconnect: () => {
      queryClientManager.unsubscribe();
    },
  })
  .useReactNative({
    networking: {
      ignoreUrls:
        /symbolicate|https:\/\/images\.contentstack\.io\/v3\/a|https:\/\/www\.google\.com\//,
    },
  })
  .use(reactotronRedux())
  .connect();

export default reactotron;

商店.ts：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  persistReducer,
  persistStore,
} from 'reduxjs-toolkit-persist';
import autoMergeLevel2 from 'reduxjs-toolkit-persist/lib/stateReconciler/autoMergeLevel2';
import { PersistConfig } from 'reduxjs-toolkit-persist/lib/types';

import Reactotron from '../../ReactotronConfig';

import rootReducer, { AppState } from './reducers/index';
import { rootSaga } from './sagas/index';

const persistConfig: PersistConfig<AppState> = {
  key: 'root',
  storage: AsyncStorage,
  blacklist: ['onboarding'],
  stateReconciler: autoMergeLevel2,
};

const sagaMiddleware = createSagaMiddleware();
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        /* ignore persistance actions */
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })
      .concat(sagaMiddleware)
      .concat(Reactotron.createEnhancer()),
});

export { useAppSelector } from './hooks/useAppSelector';
export const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);

Answer 1

Reactotron.createEnhancer()

似乎是一个商店 enhancer，而不是中间件。它应该添加到

enhancers

，而不是

middleware

。

请参阅 Reactotron：与 Redux-Toolkit 一起使用

configureStore

。

使用Redux-Toolkit的configureStore，添加为增强器。

export const store = configureStore({
  reducer: persistedReducer,
  enhancers: __DEV__ ? [reactotron.createEnhancer!()] : [],
})

更新您的代码以将 Reactotron 增强器添加到商店的

enhancers

:

示例：

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        /* ignore persistance actions */
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })
      .concat(sagaMiddleware),
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers()
      .concat(Reactotron.createEnhancer()),
});