Async transforms

README.md

@@ -58,6 +58,7 @@ persistStore(store, config, callback).purge()
       - **whitelist** *array* keys (read: reducers) to persist, if set all other keys will be ignored.
       - **storage** *object* a [conforming](https://github.com/rt2zz/redux-persist#storage-engines) storage engine.
       - **transforms** *array* transforms to be applied during storage and during rehydration.
+      - **asyncTransforms** *boolean* set to true to allow for asynchronous transforms.
       - **debounce** *integer* debounce interval applied to storage calls (in miliseconds).
       - **keyPrefix** *string* change localstorage default key (default: **reduxPersist:**) [Discussion on why we need this feature ?](https://github.com/rt2zz/redux-persist/issues/137)
     - **callback** *function* will be called after rehydration is finished.
@@ -155,6 +156,27 @@ let myTransform = createTransform(
 
 persistStore(store, {transforms: [myTransform]})
 ```
+- async transforms:
+``` js
+import { createTransform, persistStore } from 'redux-persist'
+
+let myTransform = createTransform(
+  async (inboundState, key) => {
+    const serialized = await asyncSerialize(inboundState, key)
+    return serialized
+  },
+  async (outboundState, key) => {
+    const deserialized = await specialDeserialize(outboundState, key)
+    return deserialized
+  },
+  {whitelist: ['specialReducer']}
+)
+
+persistStore(store, {
+  transforms: [myTransform],
+  asyncTransforms: true
+})
+```
 
 ## Migrations
 One challenge developers encounter when persisting state for the first time is what happens when the shape of the application state changes between deployments? Solution: [redux-persist-migrate](https://github.com/wildlifela/redux-persist-migrate)

docs/api.md

@@ -7,7 +7,7 @@
 - [getStoredState(config, callback)](#getstoredstateconfig-callback) -> Promise -> State
 - [createPersistor(store, config)](#createpersistorstore-config) -> Persistor
 - [createTransform(in, out, config)](#createtransformin-out-config) -> Transform
-- [purgeStoredState(config, keys)](#purgestoredstateconfig-keys) -> Promise -> void  
+- [purgeStoredState(config, keys)](#purgestoredstateconfig-keys) -> Promise -> void
 
 **objects**
 - [config](#config-)
@@ -53,6 +53,7 @@ let counterTransform = createTransform(
 
 persistStore(store, { transforms: [counterTransform] })
 ```
+Async transform methods are supported if you set config.asyncTransforms.
 
 #### purgeStoredState(config, keys)
 Purge stored state. Config should specify the storage engine to purge against, and if necessary the keyPrefix used. If keys is falsy, will purge all persist keys, if keys is an array, it will be treated as a whitelist of keys to purge.
@@ -71,6 +72,7 @@ purgeStoredState({storage: AsyncStorage}, ['someReducer']).then(() => {
   whitelist: ['reducerA'],
   blacklist: ['reducerB'],
   transforms: [transformA],
+  asyncTransforms: true,
   storage: AsyncStorage,
   debounce: 33,
   keyPrefix: 'myAppStorage:'

src/createPersistor.js

@@ -12,6 +12,7 @@ export default function createPersistor (store, config) {
   const transforms = config.transforms || []
   const debounce = config.debounce || false
   const keyPrefix = config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX
+  const asyncTransforms = config.asyncTransforms || false
 
   // pluggable state shape (e.g. immutablejs)
   const stateInit = config._stateInit || {}
@@ -30,6 +31,7 @@ export default function createPersistor (store, config) {
   let paused = false
   let storesToProcess = []
   let timeIterator = null
+  let isTransforming = false
 
   store.subscribe(() => {
     if (paused) return
@@ -46,6 +48,10 @@ export default function createPersistor (store, config) {
     // time iterator (read: debounce)
     if (timeIterator === null) {
       timeIterator = setInterval(() => {
+        if (isTransforming) {
+          return
+        }
+
         if (storesToProcess.length === 0) {
           clearInterval(timeIterator)
           timeIterator = null
@@ -54,14 +60,44 @@ export default function createPersistor (store, config) {
 
         let key = storesToProcess.shift()
         let storageKey = createStorageKey(key)
-        let endState = transforms.reduce((subState, transformer) => transformer.in(subState, key), stateGetter(store.getState(), key))
-        if (typeof endState !== 'undefined') storage.setItem(storageKey, serializer(endState), warnIfSetError(key))
+        let currentState = stateGetter(store.getState(), key)
+
+        isTransforming = true
+
+        function assignKeyInStorage (endState) {
+          if (typeof endState === 'undefined') return
+          storage.setItem(storageKey, serializer(endState), warnIfSetError(key))
+          isTransforming = false
+        }
+
+        applyInboundTransforms(currentState, key, assignKeyInStorage)
       }, debounce)
     }
 
     lastState = state
   })
 
+  function applyInboundTransforms (currentState, key, assignKeyInStorage) {
+    if (asyncTransforms) {
+      transforms.reduce((promise, transformer) => {
+        return promise
+          .then(() => Promise.resolve(transformer.in(currentState, key)).then((subState) => {
+            currentState = subState
+            return currentState
+          }))
+          .catch(console.error)
+      }, Promise.resolve()).then((result) => {
+        assignKeyInStorage(result)
+      })
+    } else {
+      let result = transforms.reduce((subState, transformer) => {
+        return transformer.in(subState, key)
+      }, currentState)
+
+      assignKeyInStorage(result)
+    }
+  }
+
   function passWhitelistBlacklist (key) {
     if (whitelist && whitelist.indexOf(key) === -1) return false
     if (blacklist.indexOf(key) !== -1) return false
@@ -71,6 +107,10 @@ export default function createPersistor (store, config) {
   function adhocRehydrate (incoming, options = {}) {
     let state = {}
     if (options.serial) {
+      if (asyncTransforms) {
+        throw new Error(`Async transforms not implemented with serial: true`)
+      }
+
       stateIterator(incoming, (subState, key) => {
         try {
           let data = deserializer(subState)
@@ -79,10 +119,14 @@ export default function createPersistor (store, config) {
           }, data)
           state = stateSetter(state, key, value)
         } catch (err) {
-          if (process.env.NODE_ENV !== 'production') console.warn(`Error rehydrating data for key "${key}"`, subState, err)
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Error rehydrating data for key "${key}"`, subState, err)
+          }
         }
       })
-    } else state = incoming
+    } else {
+      state = incoming
+    }
 
     store.dispatch(rehydrateAction(state))
     return state

src/getStoredState.js

@@ -8,6 +8,7 @@ export default function getStoredState (config, onComplete) {
   const whitelist = config.whitelist || false
   const transforms = config.transforms || []
   const keyPrefix = config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX
+  const asyncTransforms = config.asyncTransforms || false
 
   // fallback getAllKeys to `keys` if present (LocalForage compatability)
   if (storage.keys && !storage.getAllKeys) storage = {...storage, getAllKeys: storage.keys}
@@ -17,38 +18,78 @@ export default function getStoredState (config, onComplete) {
 
   storage.getAllKeys((err, allKeys) => {
     if (err) {
-      if (process.env.NODE_ENV !== 'production') console.warn('redux-persist/getStoredState: Error in storage.getAllKeys')
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('redux-persist/getStoredState: Error in storage.getAllKeys')
+      }
       complete(err)
     }
 
-    let persistKeys = allKeys.filter((key) => key.indexOf(keyPrefix) === 0).map((key) => key.slice(keyPrefix.length))
+    let persistKeys = allKeys
+      .filter((key) => key.indexOf(keyPrefix) === 0)
+      .map((key) => key.slice(keyPrefix.length))
     let keysToRestore = persistKeys.filter(passWhitelistBlacklist)
 
     let restoreCount = keysToRestore.length
     if (restoreCount === 0) complete(null, restoredState)
+
     keysToRestore.forEach((key) => {
       storage.getItem(createStorageKey(key), (err, serialized) => {
-        if (err && process.env.NODE_ENV !== 'production') console.warn('redux-persist/getStoredState: Error restoring data for key:', key, err)
-        else restoredState[key] = rehydrate(key, serialized)
-        completionCount += 1
-        if (completionCount === restoreCount) complete(null, restoredState)
+        function onKeyRehydrated () {
+          completionCount += 1
+          if (completionCount === restoreCount) {
+            complete(null, restoredState)
+          }
+        }
+
+        if (err && process.env.NODE_ENV !== 'production') {
+          console.warn('redux-persist/getStoredState: Error restoring data for key:', key, err)
+        } else {
+          rehydrate(restoredState, key, serialized, onKeyRehydrated)
+        }
       })
     })
   })
 
-  function rehydrate (key, serialized) {
-    let state = null
+  function rehydrate (restoredState, key, serialized, onKeyRehydrated) {
+    function onRehydrateError (err) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('redux-persist/getStoredState: Error restoring data for key:', key, err)
+      }
+      restoredState[key] = null
+    }
 
+    let data
     try {
-      let data = deserializer(serialized)
-      state = transforms.reduceRight((subState, transformer) => {
-        return transformer.out(subState, key)
-      }, data)
+      data = deserializer(serialized)
     } catch (err) {
-      if (process.env.NODE_ENV !== 'production') console.warn('redux-persist/getStoredState: Error restoring data for key:', key, err)
+      onRehydrateError(err)
+      onKeyRehydrated()
+      return
     }
 
-    return state
+    if (asyncTransforms) {
+      transforms.reduceRight((promise, transformer) => {
+        return promise
+          .then(() => Promise.resolve(transformer.out(data, key)).then((transformed) => {
+            data = transformed
+            return data
+          }))
+          .catch(onRehydrateError)
+      }, Promise.resolve()).then((result) => {
+        restoredState[key] = result
+        onKeyRehydrated()
+      })
+    } else {
+      try {
+        restoredState[key] = transforms.reduceRight((subState, transformer) => {
+          return transformer.out(subState, key)
+        }, data)
+      } catch (err) {
+        onRehydrateError(err)
+      } finally {
+        onKeyRehydrated()
+      }
+    }
   }
 
   function complete (err, restoredState) {

type-definitions/index.d.ts

@@ -15,6 +15,7 @@ declare module "redux-persist" {
     whitelist?: string[];
     storage?: Storage;
     transforms?: Array<Transform<any, any>>;
+    asyncTransforms?: boolean;
     debounce?: number;
     serialize?: boolean;
     keyPrefix?: string;