redux-persist

If you need your Redux store to last beyond a page load or refresh, look no further! redux-persist is here to the rescue. Based on this guide and this guide, you need to update your reducers and store to enjoy persistence:

Install redux-persist:

yarn add redux-persist @types/redux-persist

Update root reducer and store:

// Copied from the official README and edited
import { Provider } from 'react-redux';
import { createStore, Store } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers';
// Import YourReduxStoreModel interface here

import { PersistGate } from 'redux-persist/integration/react';
import thunk from 'redux-thunk';

// Import Blah component here

const persistConfig = {
  key: 'anyKeyInTheStore', // Or 'root' if you want the entire store to be persistent
  storage,
  // Can blacklist or whitelist one or more keys with blacklist: [...] and whitelist: [...]
};

const persistedReducer = persistReducer(persistConfig, rootReducer)

const configureStore: () => Store<YourReduxStoreModel> = () => {
  let store = createStore(persistedReducer, initialStore, applyMiddleware(thunk));
  let persistor = persistStore(store);
  return { store, persistor };
};

// The stuff below can be in a separate file.
const { store, persistor } = configureStore();

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Blah />
      </PersistGate>
    </Provider>
  );
};

The TypeScript type checker will then highlight initialStore because its type is YourReduxStoreModel. It does not contain _persist key and other keys related to redux-persist. This is a known issue. For a quick fix, I added the missing keys to YourReduxStoreModel.

To access persistor elsewhere, the author recommends accessing it through the config.

// Copied from https://github.com/rt2zz/redux-persist/issues/349
import { purgeStoredState } from 'redux-persist';
import { persistConfig } from 'relative path to your persistConfig';

purgeStoredState(persistConfig);

Cheers!