redux-persist-capacitor

Storage adapter to use Capacitor Storage with redux-persist.

Installation

1npm install --save redux-persist-capacitor

Usage

CapacitorStorage can be used as a drop-in replacement for any redux-persist storage adapter.

1import { createStore } from 'redux'
2import { persistStore, persistReducer } from 'redux-persist'
3import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';
4import CapacitorStorage from 'redux-persist-capacitor';
5
6import rootReducer from './reducers'
7
8const persistConfig = {
9  key: 'root',
10  storage: CapacitorStorage, // default export is already instantiated
11  stateReconciler: autoMergeLevel1,
12};
13
14const persistedReducer = persistReducer(persistConfig, rootReducer)
15
16export default () => {
17  let store = createStore(persistedReducer)
18  let persistor = persistStore(store)
19  return { store, persistor }
20}

Here's a recent example using multiple @reduxjs/toolkit slices and configureStore.

1import { configureStore, createSlice, getDefaultMiddleware } from '@reduxjs/toolkit';
2import { persistCombineReducers, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
3import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';
4import CapacitorStorage from 'redux-persist-capacitor';
5
6const persistConfig = {
7  key: 'root',
8  storage: CapacitorStorage,
9  stateReconciler: autoMergeLevel1,
10};
11
12const authSlice = createSlice({
13  name: 'auth',
14  initialState: {user: null},
15  reducers: {
16    setUser: (state, action) => {
17      state.user = action.payload;
18    }
19  }
20});
21
22const appSlice = createSlice({
23  name: 'app',
24  initialState: {isLoading: false},
25  reducers: {
26    setIsLoading: (state, action) => {
27      state.isLoading = action.payload;
28    }
29  }
30});
31
32const _persistedReducer = persistCombineReducers( persistConfig, {
33  auth: authSlice.reducer,
34  app: appSlice.reducer
35});
36
37export const store = configureStore({
38  reducer: _persistedReducer,
39  middleware: getDefaultMiddleware({
40    serializableCheck: {
41      ignoredActions: [
42        FLUSH,
43        REHYDRATE,
44        PAUSE,
45        PERSIST,
46        PURGE,
47        REGISTER
48      ],
49    },
50  }),
51});
52
53export const persistor = persistStore(store);