Cache Redux Store (#127)

* Add dependency * Add PersistGate * Add filter dependency * Add working filter * Clean up formatting and naming * Add transforms for some more properties * Store histoyHelper * Format Pick statements * Make creating persistor its own function (#130)
source-academy · Jun 23, 2018 · 9184621 · 9184621
1 parent fb842db
commit 9184621
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -54,6 +54,8 @@
     "react-transition-group": "^2.3.1",
     "redux": "^3.7.2",
     "redux-mock-store": "^1.5.1",
+    "redux-persist": "5.9.1",
+    "redux-persist-transform-filter": "^0.0.18",
     "redux-saga": "^0.15.6",
     "typesafe-actions": "^1.1.2",
     "utility-types": "^2.0.0"

diff --git a/src/createStore.ts b/src/createStore.ts
@@ -1,23 +1,25 @@
 import { History } from 'history'
 import { routerMiddleware, routerReducer } from 'react-router-redux'
-import {
-  applyMiddleware,
-  combineReducers,
-  compose,
-  createStore as _createStore,
-  Store,
-  StoreEnhancer
-} from 'redux'
+import { applyMiddleware, compose, createStore as _createStore, Store, StoreEnhancer } from 'redux'
+import { persistCombineReducers, PersistConfig, persistStore } from 'redux-persist'
+import { createFilter } from 'redux-persist-transform-filter'
+import storage from 'redux-persist/lib/storage' // defaults to localStorage
 import createSagaMiddleware from 'redux-saga'
 
 import reducers from './reducers'
-import { IState } from './reducers/states'
+import { IApplicationState, IPlaygroundState, ISessionState, IState } from './reducers/states'
 import mainSaga from './sagas'
 import { history as appHistory } from './utils/history'
 
 declare var __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: () => StoreEnhancer<IState>
 
-function createStore(history: History): Store<IState> {
+type IPersistState = Pick<IApplicationState, 'environment'> &
+  Pick<IPlaygroundState, 'editorValue'> &
+  Pick<ISessionState, 'historyHelper'> &
+  Pick<ISessionState, 'token'> &
+  Pick<ISessionState, 'username'>
+
+function createStore(history: History) {
   let composeEnhancers: any = compose
   const sagaMiddleware = createSagaMiddleware()
   const middleware = [sagaMiddleware, routerMiddleware(history)]
@@ -26,15 +28,32 @@ function createStore(history: History): Store<IState> {
     composeEnhancers = __REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   }
 
-  const rootReducer = combineReducers({
+  const transforms = [
+    createFilter<IState, IPersistState>('application', ['environment']),
+    createFilter<IState, IPersistState>('playground', ['editorValue']),
+    createFilter<IState, IPersistState>('session', ['token', 'username', 'historyHelper'])
+  ]
+
+  const persistConfig: PersistConfig = {
+    key: 'root',
+    storage,
+    transforms: [...transforms]
+  }
+
+  const persistedReducer = persistCombineReducers<IState>(persistConfig, {
     ...reducers,
     router: routerReducer
   })
-  const enchancers = composeEnhancers(applyMiddleware(...middleware))
-  const createdStore = _createStore(rootReducer, enchancers)
 
+  const enchancers = composeEnhancers(applyMiddleware(...middleware))
+  const createdStore = _createStore(persistedReducer, enchancers) as Store<IState>
   sagaMiddleware.run(mainSaga)
   return createdStore
 }
 
-export const store = createStore(appHistory) as Store<IState>
+function createPersistor(createdStore: Store<IState>) {
+  return persistStore(createdStore)
+}
+
+export const store = createStore(appHistory)
+export const persistor = createPersistor(store)
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
-
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'react-router-redux'
+import { PersistGate } from 'redux-persist/integration/react'
 
 import ApplicationContainer from './containers/ApplicationContainer'
-import { store } from './createStore'
+import { persistor, store } from './createStore'
 import { VERSION } from './utils/constants'
 import { history } from './utils/history'
 import registerServiceWorker from './utils/registerServiceWorker'
@@ -23,9 +23,11 @@ console.log(
 
 render(
   <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <ApplicationContainer />
-    </ConnectedRouter>
+    <PersistGate loading={null} persistor={persistor}>
+      <ConnectedRouter history={history}>
+        <ApplicationContainer />
+      </ConnectedRouter>
+    </PersistGate>
   </Provider>,
   rootContainer
 )

diff --git a/yarn.lock b/yarn.lock
@@ -5067,7 +5067,7 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
-lodash.clonedeep@^4.3.2:
+lodash.clonedeep@^4.3.2, lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
@@ -5083,6 +5083,10 @@ lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
+lodash.forin@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.forin/-/lodash.forin-4.4.0.tgz#5d3f20ae564011fbe88381f7d98949c9c9519731"
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -5091,6 +5095,10 @@ lodash.isboolean@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
 
+lodash.isempty@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+
 lodash.isequal@^4.1.1, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -5119,6 +5127,14 @@ lodash.mergewith@^4.6.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
 
+lodash.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -5144,6 +5160,10 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
+lodash.unset@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
+
 "lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@@ -7050,6 +7070,22 @@ redux-mock-store@^1.5.1:
   dependencies:
     lodash.isplainobject "^4.0.6"
 
+redux-persist-transform-filter@^0.0.18:
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/redux-persist-transform-filter/-/redux-persist-transform-filter-0.0.18.tgz#bc9901a0267bd64631099b4e7bb4d48c00647418"
+  dependencies:
+    lodash.clonedeep "^4.5.0"
+    lodash.forin "^4.4.0"
+    lodash.get "^4.4.2"
+    lodash.isempty "^4.4.0"
+    lodash.pickby "^4.6.0"
+    lodash.set "^4.3.2"
+    lodash.unset "^4.5.2"
+
+[email protected]:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.9.1.tgz#83bd4abd526ef768f63fceee338fa9d8ed6552d6"
+
 redux-saga@^0.15.6:
   version "0.15.6"
   resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.15.6.tgz#8638dc522de6c6c0a496fe8b2b5466287ac2dc4d"