在 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

这似乎是 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
+  }),
});
...

Answer 2

我认为您需要使用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>