feat: redux persistence and error handling (#48)

* feat: redux persistence and error handling

* chore: update version

package.json

@@ -9,15 +9,14 @@
     "@types/react-intl": "^2.3.8",
     "@types/react-redux": "^6.0.4",
     "@types/react-router-redux": "^5.0.14",
-    "@types/redux-storage": "^4.0.11",
     "@types/redux-storage-engine-localstorage": "^1.1.0",
     "@types/segment-analytics": "0.0.28",
     "@types/uuid": "^3.4.3",
     "axios": "^0.19.0",
     "date-fns": "^1.29.0",
     "flat": "^4.1.0",
     "react-intl": "^2.4.0",
-    "redux-storage": "^4.1.2",
+    "redux-persistence": "^1.1.0",
     "redux-storage-decorator-filter": "^1.1.8",
     "redux-storage-engine-localstorage": "^1.1.4",
     "tslint": "^5.7.0",

src/modules/storage/actions.ts

@@ -1,4 +1,4 @@
-import { LOAD, SAVE } from 'redux-storage'
+import { LOAD, SAVE } from 'redux-persistence'
 
 export const STORAGE_LOAD = LOAD
 export const STORAGE_SAVE = SAVE

src/modules/storage/middleware.ts

@@ -1,5 +1,5 @@
 import { Store } from 'redux'
-import * as storage from 'redux-storage'
+import * as storage from 'redux-persistence'
 import createStorageEngine from 'redux-storage-engine-localstorage'
 import filter from 'redux-storage-decorator-filter'
 import { hasLocalStorage, migrateStorage } from '../../lib/localStorage'
@@ -54,24 +54,30 @@ export function createStorageMiddleware<T>(options: StorageMiddleware<T>) {
     ['storage', 'version'],
     ...paths
   ])
-  const storageMiddleware: any = storage.createMiddleware(
-    storageEngine,
-    [],
-    [
-      CHANGE_LOCALE,
-      FETCH_TRANSLATIONS_SUCCESS,
-      FETCH_TRANSACTION_REQUEST,
-      FETCH_TRANSACTION_SUCCESS,
-      FETCH_TRANSACTION_FAILURE,
-      UPDATE_TRANSACTION_STATUS,
-      UPDATE_TRANSACTION_NONCE,
-      REPLACE_TRANSACTION_SUCCESS,
-      FIX_REVERTED_TRANSACTION,
-      CLEAR_TRANSACTIONS,
-      CLEAR_TRANSACTION,
-      ...actions
-    ]
-  )
+
+  const whitelist = [
+    CHANGE_LOCALE,
+    FETCH_TRANSLATIONS_SUCCESS,
+    FETCH_TRANSACTION_REQUEST,
+    FETCH_TRANSACTION_SUCCESS,
+    FETCH_TRANSACTION_FAILURE,
+    UPDATE_TRANSACTION_STATUS,
+    UPDATE_TRANSACTION_NONCE,
+    REPLACE_TRANSACTION_SUCCESS,
+    FIX_REVERTED_TRANSACTION,
+    CLEAR_TRANSACTIONS,
+    CLEAR_TRANSACTION,
+    ...actions
+  ]
+
+  const storageMiddleware: any = storage.createMiddleware(storageEngine, {
+    filterAction: (action: any) => {
+      return whitelist.includes(action.type)
+    },
+    transform: options.transform,
+    onError: options.onError
+  })
+
   const load = (store: Store<any>) => {
     if (setItemFailure) {
       const unsubscribe = store.subscribe(() => {

src/modules/storage/reducer.ts

@@ -1,5 +1,6 @@
 import { AnyAction, Reducer } from 'redux'
-import * as storage from 'redux-storage'
+import * as storage from 'redux-persistence'
+import { StateMerger } from 'redux-persistence/dist/types'
 import { STORAGE_LOAD } from './actions'
 
 export type StorageState = {
@@ -14,7 +15,7 @@ export const INITIAL_STATE: StorageState = {
 
 export function storageReducerWrapper(
   reducer: any,
-  merger?: storage.StateMerger
+  merger?: StateMerger
 ): Reducer<{} | undefined> {
   return storage.reducer(reducer, merger)
 }

src/modules/storage/types.ts

@@ -5,4 +5,6 @@ export interface StorageMiddleware<T> {
   paths?: (string | string[])[]
   actions?: string[]
   migrations?: Migrations<T>
+  transform?: <T>(state: T) => T
+  onError?: (err: Error) => void
 }