Persist the app state

The store of Redux consisting of reducers is a session store, similar to default in-memory store for #KeystoneJS, it is volatile. To make it persistent, redux-persist is a good choice. You can even whitelist the #reducers for persistent storage.

Reference

redux-persist

https://juejin.im/entry/57cac7b167f3560057bb00a7

Design principle

1. Saga must be bundled to store as middleware
2. So as autoRehydrate that is also a middleware to merge subsequent delta of in-memory store to persistent storage
3. However, it is usually pointless to execute Saga prior to completion of Rehydate
4. Thus, rootSaga should be executed on callback of persistStore

// /MobApp/app/store/ConfigureStore.js

import createSagaMiddleware from 'redux-saga'
import { persistStore, autoRehydrate } from 'redux-persist'
import { AsyncStorage } from 'react-native'
import rootReducer from '../reducers';
import rootSaga from '../sagas';

const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware];

const enhancer = compose(
applyMiddleware(...middlewares),
autoRehydrate()
);

export default function configureStore(initialState) {

  const store = createStore(rootReducer, initialState, enhancer);

  persistStore(store, { whitelist: ['UserProfile'], storage: AsyncStorage}, () => {
    sagaMiddleware.run(rootSaga);
  });

  return store;
}

// /WebApp/app/store/ConfigureStore.js

import createSagaMiddleware from 'redux-saga'
import { persistStore, autoRehydrate } from 'redux-persist'
import { asyncSessionStorage } from 'redux-persist/storages'
import rootReducer from '../reducers';
import rootSaga from '../sagas';

const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware];

const enhancer = compose(
    applyMiddleware(...middlewares),
    autoRehydrate()
);

export default function configureStore(initialState) {

    const store = createStore(rootReducer, initialState, enhancer);

    persistStore(store, { whitelist: ['UserProfile'], storage: asyncSessionStorage}, () => {
        sagaMiddleware.run(rootSaga);
    })

    return store;
}

// ./app/store/index.js

import configureStore from './ConfigureStore';

const store = configureStore();
export default store;