feat: resync state

README.md

@@ -145,6 +145,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.ts

@@ -1,6 +1,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.ts

@@ -10,6 +10,7 @@ import {
  PURGE,
  REHYDRATE,
  DEFAULT_VERSION,
+ RESYNC
 } from './constants'
 
 import type {
@@ -159,6 +160,19 @@ export default function persistReducer<S, A extends Action>(
  ...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.ts

@@ -6,7 +6,7 @@ import type {
 } from './types'
 
 import { AnyAction, createStore, Store } from 'redux'
-import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from './constants'
+import { FLUSH, PAUSE, PERSIST, RESYNC, PURGE, REGISTER, REHYDRATE, } from './constants'
 
 type BoostrappedCb = () => any;
 
@@ -116,6 +116,15 @@ export default function persistStore(
  persist: () => {
  store.dispatch({ type: PERSIST, register, rehydrate })
  },
+ resync: () => {
+ return new Promise<void>(resolve => {
+ store.dispatch({
+ type: RESYNC,
+ rehydrate,
+ result: () => resolve(),
+ })
+ })
+ },
  }
 
  if (!(options && options.manualPersist)){

src/types.ts

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

tests/resync.spec.js

@@ -0,0 +1,79 @@
+import test from 'ava'
+
+import _ from 'lodash'
+import { createStore } from 'redux'
+
+import getStoredState from '../src/getStoredState'
+import persistReducer from '../src/persistReducer'
+import persistStore from '../src/persistStore'
+import { createMemoryStorage } from 'storage-memory'
+
+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()
+ })
+ })
+})