在React-native中使用Redux Toolkit持久存储

Question

我正在将redux-persist与redux工具包一起使用。 这是我的商店配置。

我以前没有实现或配置存储。 我打算在登录后保持用户状态。 当前登录后，如果我在模拟器中重新加载应用程序，它将始终返回登录屏幕。

我的商店配置正确吗？

更新的商店文件：

import {configureStore} from '@reduxjs/toolkit';
import authReducer from '../features/login/authSlice';
import AsyncStorage from '@react-native-community/async-storage';
import {persistReducer, persistStore} from 'redux-persist';
import {combineReducers} from 'redux';
import hardSet from 'redux-persist/lib/stateReconciler/hardSet';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const reducers = combineReducers({
  auth: authReducer,
  // other reducers goes here...
});

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
//  stateReconciler: hardSet,
};

const _persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: _persistedReducer,
});
export const persistor = persistStore(store);

我的index.js文件中，我的根组件用PersistGate包裹

   import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {store, persistor} from './src/stores/store';
import {Provider} from 'react-redux';
import {storeUser, storeRefreshToken} from './src/features/login/authSlice';
import {PersistGate} from 'redux-persist/lib/integration/react';

const RNRedux = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

AppRegistry.registerComponent(appName, () => RNRedux);

我当前遇到的错误：

Answer 1

我认为您需要使用persistStore。您应该将应用商店存储在persistStore中，然后使用persistGate。 PersistGate会延迟应用程序UI的呈现，直到检索到您的持久状态并将其保存到Redux。

因此，您的商店文件可以是：

import { persistStore } from 'redux-persist';
const persistor = persistStore(store);
export { persistor, store };

您的app.js将是：

import { store, persistor } from 'path_to_your_store/store';
<Provider store={store}>
          <PersistGate persistor={persistor}>
             </App>
          </PersistGate>
</Provider>

Answer 2

这似乎是redux-persist将函数作为操作类型is not recommended by the Redux devs传递的问题。 Redux Toolkit是使用默认设置开发的，有助于避免创建易破解的代码。 RTK的默认中间件“ serializableCheck”引发此错误。可以完全禁用此中间件，也可以仅针对特定操作禁用此中间件，并且示例提供了两种方法来提供this SO question的答案。 RTK中间件文档here，以供快速参考。

这是一个适合您的全面解决方案：

- import {configureStore} from '@reduxjs/toolkit';
+ import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
...
export const store = configureStore({
  reducer: _persistedReducer,
+  middleware: getDefaultMiddleware({
+    serializableCheck: false
+  }),
});
...