如何为 React Native 中的离线存储设置 redux 持久化？

Question

我使用 redux persist 和 asyncstorage 来存储离线数据，但是在我清除我的应用程序后（比如向右滑动以从我的 android 手机的进程中删除它），下次我再次打开应用程序时我的数据就消失了。

以下是相关代码：

// src/reduxActions/store.ts
import { configureStore } from '@reduxjs/toolkit'
import { combineReducers, Store } from 'redux';
import {
  Persistor,
  persistStore,
  persistReducer,
} from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage';
import AuthReducer from './auth/reducer';
import ItemReducer from './item/reducer';
import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';

const rootReducer = combineReducers({
  auth: AuthReducer,
  item: ItemReducer,
});

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: [],
  storageReconciler: autoMergeLevel1,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export type RootState = ReturnType<typeof rootReducer>;

let store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export function getStore(): Store<RootState> {
  return store;
}

export const persistor = persistStore(store);
export type AppDispatch = typeof store.dispatch;

// src/reduxActions/item/reducer.ts
import { createSlice } from '@reduxjs/toolkit';
import { Item } from 'models/item';
import { createItem, getItems, updateItem, deleteItem } from './actions';

interface ItemState {
  items: {
    [index: string]: Item,
  }
  itemIds: string[],
  offlineItems: {
    [index: string]: Item,
  },
  lastOfflineItemId: string,
}

const initialState: ItemState = {
  items: {},
  itemIds: [],
  offlineItems: {},
  lastOfflineItemId: '0',
}

const itemSlice = createSlice({
  name: 'item',
  initialState,
  reducers: {
    createOfflineItem(state, action) {
      const id = (parseInt(state.lastOfflineItemId)+1).toString();
      const item = {
        "id": id,
        "createdAt": Date.now(),
      }
      state.offlineItems[id] = { ...item, ...action.payload };
      state.lastOfflineItemId = id;
    },
    toggleOfflineIsFavorite(state, action) {
      state.offlineItems[action.payload.id].isFavorite = action.payload.isFavorite;
    },
    editOfflineItem(state, action) {
      state.offlineItems[action.payload.id] = {
        ...state.offlineItems[action.payload.id],
        ...action.payload,
      };
    },
    deleteOfflineItem(state, action) {
      delete state.offlineItems[action.payload];
    }
  },
  extraReducers: (builder) => {
    builder.addCase(createItem.fulfilled, (state, action) => {
      state.items[action.payload.id] = action.payload;
      state.itemIds.unshift(action.payload.id);
    })
    builder.addCase(getItems.fulfilled, (state, action) => {
      state.items = action.payload.results.reduce(function(map: { [index: string]: Item }, item: Item) {
        map[item.id] = item;
        return map;
      }, {});
      state.itemIds = action.payload.results.map((item: Item) => item.id);
    })
    builder.addCase(updateItem.fulfilled, (state, action) => {
      state.items[action.payload.id] = action.payload;
    })
    builder.addCase(deleteItem.fulfilled, (state, action) => {
      state.itemIds = state.itemIds.filter(id => id != action.payload);
      delete state.items[action.payload];
    })
    builder.addDefaultCase((state) => {
      return state;
    })
  },
})

const { actions, reducer } = itemSlice;
export const { createOfflineItem, toggleOfflineIsFavorite, editOfflineItem, deleteOfflineItem } = actions;

export default reducer;

完整代码如下：https://www.github.com/roumanite/wmi-mobile

我希望能够存储永远不会消失的离线数据，无需重启手机，也可以备份和同步。我想只有完全卸载和清除它才会消失

我该如何解决这个问题？谢谢

Answer 1

你可以更新 const persistConfig 对象：

 const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['auth', 'item'],
  storageReconciler: autoMergeLevel1,
};