How to use @redux-offline/redux-offline - 10 common examples

const persistCallback = () => {
  console.log('rehydration completed')
}

const offlineConfig = {
  ...defaultConfig,
  persist,
  persistAutoRehydrate,
  persistOptions,
  persistCallback,
  offlineStateLens
}

// - Config and create store of redux
let store: redux.Store = redux.createStore(rootReducer(history), fromJS(initialState), redux.compose(
  redux.applyMiddleware(thunk, routerMiddleware(history), sagaMiddleware), offline(offlineConfig)
))

export default {store, runSaga: sagaMiddleware.run, close: () => store.dispatch(END), history}

constructor(props) {
        super(props);

        // define the initial state where none of the widgets are visible
        this.state = {
            hackerNews: false,
            weather: false,
        };

        /**
         * configure the store and load the thunk and saga extension
         * The extensions are optional and you can choose extension based on the middleware you use
         * You can also build your own extensions for any other middleware e.g. redux-observable
         */
        this.store = createStore({
            enhancements: [offline(offlineConfig)],
            extensions: [getThunkExtension(), getSagaExtension()],
        });
    }

// Create enhanced redux store
  const store = createStore(
    // Add reducer for rehydrated flag
    (state: { [key: string]: any } = {}, action: any) => {
      const { [rehydratedKey]: rehydrated, ...rest } = state;

      return {
        ...reducer(rest, action),
        [rehydratedKey]: rehydrateReducer(rehydrated, action),
      };
    },
    preloadedState,
    compose(
      enhancer,
      // Add redux offline
      reduxOffline({
        ...config,
        effect: (effect, action) => {
          if (action.type === APOLLO_OFFLINE_QUEUE) {
            // Try to execute queued request
            return networkInterface.networkInterface.query(effect.request)
              .then((data) => {
                // Request successful -> resolve transport promise
                const { callback } = effect;
                if (typeof callback === 'function') callback(data);
                return data;
              });
          }

          /* tslint:disable:strict-boolean-expressions */
          // Unknown effect type
          return config && config.effect ?

},
                detected: (state = false, action) => {
                    switch (action.type) {
                        case WRITE_DETECTED_NETWORK:
                            return true;
                        default:
                            return state;
                    }
                },
                ...storeOffline.cacheReducer(),
                ...storeOffline.rootsReducer(),
            }),
            typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
            compose(
                applyMiddleware(thunk),
                offline({
                    ...defaultOfflineConfig,
                    detectNetwork: callback => {
                        detectNetwork(online => {
                            callback(online);
                            store.dispatch(writeThunk(WRITE_DETECTED_NETWORK, true) as any as Action);
                        });
                    },
                    retry: storeOffline.getEffectDelay,
                    persistCallback: () => {
                        persistCallback();
                    },
                    persistOptions: {
                        ...storeOffline.getPersistOptions()
                    },
                    effect: (effectPayload, action) => storeOffline.effect(
                        effectPayload,

combineReducers({
            rehydrated: (state = false, action) => {
                switch (action.type) {
                    case PERSIST_REHYDRATE:
                        return true;
                    default:
                        return state;
                }
            },
            ...cacheReducer(),
            ...reducer(dataIdFromObject),
        }),
        typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
        compose(
            applyMiddleware(thunk),
            offline({
                ...defaultOfflineConfig,
                retry: getEffectDelay,
                persistCallback: () => {
                    logger('Storage ready');

                    persistCallback();
                },
                persistOptions: {
                    ...(keyPrefix && { keyPrefix: `${keyPrefix}:` }),
                    ...(storage && { storage }),
                    whitelist: [
                        NORMALIZED_CACHE_KEY,
                        METADATA_KEY,
                        'offline',
                    ]
                },

export default function(history) {
  const middleware = applyMiddleware(
    requestPromiseMiddleware,
    routerMiddleware(history),
    createLogicMiddleware(logics),
  )

  const store = createStore(
    createRootReducer(history),
    composeEnhancers(middleware, offline(offlineConfig)),
  )
  if (dev && module.hot) {
    module.hot.accept('./reducers', () => {
      store.replaceReducer(createRootReducer(history))
    })
  }

  return store
}

import reducer from './reducer';
import rootSaga from './saga';

const offlineConfig = {
  ...defaultOfflineConfig,
  persistOptions: {
    whitelist: [
      'weather'
    ]
  }
};

const sagaMiddleware = createSagaMiddleware();

const enhancer = __DEV__
  ? composeWithDevTools(applyMiddleware(sagaMiddleware), offline(offlineConfig))
  : compose(applyMiddleware(sagaMiddleware), offline(offlineConfig));

const store = createStore(reducer, enhancer);

sagaMiddleware.run(rootSaga);

export default store;

export function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(...middleware),
      offline(offlineConfig)
    )
  );
  return store;
}

import rootSaga from './saga';

const offlineConfig = {
  ...defaultOfflineConfig,
  persistOptions: {
    whitelist: [
      'weather'
    ]
  }
};

const sagaMiddleware = createSagaMiddleware();

const enhancer = __DEV__
  ? composeWithDevTools(applyMiddleware(sagaMiddleware), offline(offlineConfig))
  : compose(applyMiddleware(sagaMiddleware), offline(offlineConfig));

const store = createStore(reducer, enhancer);

sagaMiddleware.run(rootSaga);

export default store;

};
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

let store;
if (process.env.REACT_APP_OFFLINE_API === 'alternative') {
  const { middleware, enhanceReducer, enhanceStore } = createOffline(config);
  store = createStore(
    enhanceReducer(reducer),
    undefined,
    composeEnhancers(applyMiddleware(middleware, tickMiddleware), enhanceStore)
  );
} else {
  store = createStore(
    reducer,
    composeEnhancers(offline(config), applyMiddleware(tickMiddleware))
  );
}

export default store;