From 9184621e62a93e1a2e331662ae86c8e2c8b66dcb Mon Sep 17 00:00:00 2001 From: Vignesh Date: Sat, 23 Jun 2018 15:03:53 +0800 Subject: [PATCH] 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) --- package.json | 2 ++ src/createStore.ts | 47 ++++++++++++++++++++++++++++++++-------------- src/index.tsx | 12 +++++++----- yarn.lock | 38 ++++++++++++++++++++++++++++++++++++- 4 files changed, 79 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index f813b3d343..f36235b6b8 100644 --- 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 index e717579e75..3f3d130fc8 100644 --- 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 -function createStore(history: History): Store { +type IPersistState = Pick & + Pick & + Pick & + Pick & + Pick + +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 { composeEnhancers = __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ } - const rootReducer = combineReducers({ + const transforms = [ + createFilter('application', ['environment']), + createFilter('playground', ['editorValue']), + createFilter('session', ['token', 'username', 'historyHelper']) + ] + + const persistConfig: PersistConfig = { + key: 'root', + storage, + transforms: [...transforms] + } + + const persistedReducer = persistCombineReducers(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 sagaMiddleware.run(mainSaga) return createdStore } -export const store = createStore(appHistory) as Store +function createPersistor(createdStore: Store) { + return persistStore(createdStore) +} + +export const store = createStore(appHistory) +export const persistor = createPersistor(store) diff --git a/src/index.tsx b/src/index.tsx index 68fc539d44..21cc6b18b9 100644 --- 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( - - - + + + + + , rootContainer ) diff --git a/yarn.lock b/yarn.lock index 4f6eda6323..440d72780c 100644 --- 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" + +redux-persist@5.9.1: + 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"