feat: resync state

Author: SebastienGllmt

README.md

@@ -100,6 +100,8 @@ const App = () => {
       - pauses persistence
     - `.persist()`
       - resumes persistence
+    - `.resync()`
+      - overrides redux state with the value in storage
 
 ## State Reconciler
 State reconcilers define how incoming state is merged in with initial state. It is critical to choose the right state reconciler for your state. There are three options that ship out of the box, let's look at how each operates:

src/constants.js

@@ -3,6 +3,7 @@
 export const KEY_PREFIX = 'persist:'
 export const FLUSH = 'persist/FLUSH'
 export const REHYDRATE = 'persist/REHYDRATE'
+export const RESYNC = 'persist/RESYNC'
 export const PAUSE = 'persist/PAUSE'
 export const PERSIST = 'persist/PERSIST'
 export const PURGE = 'persist/PURGE'

src/persistReducer.js

@@ -6,6 +6,7 @@ import {
   PURGE,
   REHYDRATE,
   DEFAULT_VERSION,
+  RESYNC,
 } from './constants'
 
 import type {
@@ -155,6 +156,19 @@ export default function persistReducer<State: Object, Action: Object>(
         ...baseReducer(restState, action),
         _persist,
       }
+    } else if (action.type === RESYNC) {
+      getStoredState(config)
+        .then(
+          restoredState =>
+            action.rehydrate(config.key, restoredState, undefined),
+          err => action.rehydrate(config.key, undefined, err)
+        )
+        .then(() => action.result())
+
+      return {
+        ...baseReducer(restState, action),
+        _persist: { version, rehydrated: false },
+      }
     } else if (action.type === FLUSH) {
       action.result(_persistoid && _persistoid.flush())
       return {

src/persistStore.js

@@ -11,7 +11,7 @@ import type {
 } from './types'
 
 import { createStore } from 'redux'
-import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from './constants'
+import { FLUSH, PAUSE, PERSIST, RESYNC, PURGE, REGISTER, REHYDRATE } from './constants'
 
 type PendingRehydrate = [Object, RehydrateErrorType, PersistConfig]
 type Persist = <R>(PersistConfig, MigrationManifest) => R => R
@@ -120,6 +120,15 @@ export default function persistStore(
     persist: () => {
       store.dispatch({ type: PERSIST, register, rehydrate })
     },
+    resync: () => {
+      return new Promise(resolve => {
+        store.dispatch({
+          type: RESYNC,
+          rehydrate,
+          result: () => resolve(),
+        })
+      })
+    },
   }
 
   if (!(options && options.manualPersist)){

src/types.js

@@ -81,6 +81,7 @@ type PersistorSubscribeCallback = () => any
 export type Persistor = {
   pause: () => void,
   persist: () => void,
+  resync: () => Promise<void>,
   purge: () => Promise<any>,
   flush: () => Promise<any>,
   +dispatch: PersistorAction => PersistorAction,

tests/resync.spec.js

@@ -0,0 +1,85 @@
+// @flow
+
+import test from 'ava'
+import sinon from 'sinon'
+
+import _ from 'lodash'
+import configureStore from 'redux-mock-store'
+import { createStore } from 'redux'
+
+import getStoredState from '../src/getStoredState'
+import persistReducer from '../src/persistReducer'
+import persistStore from '../src/persistStore'
+import { createMemoryStorage } from 'storage-memory'
+import { PERSIST, REHYDRATE, FLUSH } from '../src/constants'
+import sleep from './utils/sleep'
+
+const initialState = { a: 0 }
+const persistObj = {
+  version: 1,
+  rehydrated: true
+};
+
+let reducer = (state = initialState, { type }) => {
+  console.log('action', type)
+  if (type === 'INCREMENT') {
+    return _.mapValues(state, v => v + 1)
+  }
+  return state
+}
+
+const memoryStorage = createMemoryStorage()
+
+const config = {
+  key: 'resync-reducer-test',
+  version: 1,
+  storage: memoryStorage,
+  debug: true,
+  throttle: 1000,
+}
+
+test('state is resync from storage', t => {
+  return new Promise((resolve, reject) => {
+    let rootReducer = persistReducer(config, reducer)
+    const store = createStore(rootReducer)
+
+    const persistor = persistStore(store, {}, async () => {
+
+      // 1) Make sure redux-persist and storage are in the same state
+
+      await persistor.flush();
+      let storagePreModify = await getStoredState(config)
+
+      const oldStorageState = {
+        ...initialState,
+        _persist: persistObj,
+      };
+      t.deepEqual(
+        storagePreModify,
+        oldStorageState
+      )
+
+      // 2) Change the storage directly (so redux-persist won't notice it changed)
+
+      const newStorageValue = {
+        a: 1, // override the value of a
+        _persist: JSON.stringify(persistObj),
+      }
+      await memoryStorage.setItem(`persist:${config.key}`, JSON.stringify(newStorageValue));
+      let storagePostModify = await getStoredState(config)
+
+      // 3) Call resync and make sure redux-persist state was overriden by storage content
+
+      await persistor.resync();
+      t.deepEqual(
+        storagePostModify,
+        {
+          a: 1,
+          _persist: persistObj,
+        }
+      )
+
+      resolve()
+    })
+  })
+})

types/constants.d.ts

@@ -2,6 +2,7 @@ declare module "redux-persist/es/constants" {
   const KEY_PREFIX: 'persist:';
   const FLUSH: 'persist/FLUSH';
   const REHYDRATE: 'persist/REHYDRATE';
+  const RESYNC: 'persist/RESYNC';
   const PAUSE: 'persist/PAUSE';
   const PERSIST: 'persist/PERSIST';
   const PURGE: 'persist/PURGE';

types/types.d.ts

@@ -137,6 +137,7 @@ declare module "redux-persist/es/types" {
   interface Persistor {
     pause(): void;
     persist(): void;
+    resync(): Promise<void>;
     purge(): Promise<any>;
     flush(): Promise<any>;
     dispatch(action: PersistorAction): PersistorAction;