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

Posted 2023-03-10

【中文标题】在 React-native 中使用 Redux Toolkit 持久化存储

【英文标题】：Persist store with Redux Toolkit in React-native

【发布时间】：2020-09-21 09:37:25

【问题描述】：

我正在使用 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);

我目前遇到的错误：

【参考方案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
+  ),
);
...

【参考方案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>

【讨论】：

请再次检查我的问题，我根据您的建议进行了更新。它现在给了我提到的错误。