redux-persist-capacitor
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    redux-persist-capacitor

    Storage adapter to use Capacitor Storage with redux-persist.

    Installation

    npm install --save redux-persist-capacitor

    Usage

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

    import { createStore } from 'redux'
    import { persistStore, persistReducer } from 'redux-persist'
    import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';
    import CapacitorStorage from 'redux-persist-capacitor-storage';
    
    import rootReducer from './reducers'
    
    const persistConfig = {
      key: 'root',
      storage: CapacitorStorage, // default export is already instantiated
      stateReconciler: autoMergeLevel1,
    };
    
    const persistedReducer = persistReducer(persistConfig, rootReducer)
    
    export default () => {
      let store = createStore(persistedReducer)
      let persistor = persistStore(store)
      return { store, persistor }
    }

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

    import { configureStore, createSlice, getDefaultMiddleware } from '@reduxjs/toolkit';
    import { persistCombineReducers, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
    import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';
    import CapacitorStorage from 'redux-persist-capacitor-storage';
    
    const persistConfig = {
      key: 'root',
      storage: CapacitorStorage,
      stateReconciler: autoMergeLevel1,
    };
    
    const authSlice = createSlice({
      name: 'auth',
      initialState: {user: null},
      reducers: {
        setUser: (state, action) => {
          state.user = action.payload;
        }
      }
    });
    
    const appSlice = createSlice({
      name: 'app',
      initialState: {isLoading: false},
      reducers: {
        setIsLoading: (state, action) => {
          state.isLoading = action.payload;
        }
      }
    });
    
    const _persistedReducer = persistCombineReducers( persistConfig, {
      auth: authSlice.reducer,
      app: appSlice.reducer
    });
    
    export const store = configureStore({
      reducer: _persistedReducer,
      middleware: getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [
            FLUSH,
            REHYDRATE,
            PAUSE,
            PERSIST,
            PURGE,
            REGISTER
          ],
        },
      }),
    });
    
    export const persistor = persistStore(store);

    Install

    npm i redux-persist-capacitor

    DownloadsWeekly Downloads

    13

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    5.29 kB

    Total Files

    5

    Last publish

    Collaborators

    • ryanwillis