Skip to content

Commit 9184621

Browse files
remo5000ning-y
remo5000
authored and
ning-y
committed
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)
1 parent fb842db commit 9184621

File tree

4 files changed

+79
-20
lines changed

4 files changed

+79
-20
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@
5454
"react-transition-group": "^2.3.1",
5555
"redux": "^3.7.2",
5656
"redux-mock-store": "^1.5.1",
57+
"redux-persist": "5.9.1",
58+
"redux-persist-transform-filter": "^0.0.18",
5759
"redux-saga": "^0.15.6",
5860
"typesafe-actions": "^1.1.2",
5961
"utility-types": "^2.0.0"

‎src/createStore.ts‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import { History } from 'history'
22
import { routerMiddleware, routerReducer } from 'react-router-redux'
3-
import {
4-
applyMiddleware,
5-
combineReducers,
6-
compose,
7-
createStore as _createStore,
8-
Store,
9-
StoreEnhancer
10-
} from 'redux'
3+
import { applyMiddleware, compose, createStore as _createStore, Store, StoreEnhancer } from 'redux'
4+
import { persistCombineReducers, PersistConfig, persistStore } from 'redux-persist'
5+
import { createFilter } from 'redux-persist-transform-filter'
6+
import storage from 'redux-persist/lib/storage' // defaults to localStorage
117
import createSagaMiddleware from 'redux-saga'
128

139
import reducers from './reducers'
14-
import { IState } from './reducers/states'
10+
import { IApplicationState, IPlaygroundState, ISessionState, IState } from './reducers/states'
1511
import mainSaga from './sagas'
1612
import { history as appHistory } from './utils/history'
1713

1814
declare var __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: () => StoreEnhancer<IState>
1915

20-
function createStore(history: History): Store<IState> {
16+
type IPersistState = Pick<IApplicationState, 'environment'> &
17+
Pick<IPlaygroundState, 'editorValue'> &
18+
Pick<ISessionState, 'historyHelper'> &
19+
Pick<ISessionState, 'token'> &
20+
Pick<ISessionState, 'username'>
21+
22+
function createStore(history: History) {
2123
let composeEnhancers: any = compose
2224
const sagaMiddleware = createSagaMiddleware()
2325
const middleware = [sagaMiddleware, routerMiddleware(history)]
@@ -26,15 +28,32 @@ function createStore(history: History): Store<IState> {
2628
composeEnhancers = __REDUX_DEVTOOLS_EXTENSION_COMPOSE__
2729
}
2830

29-
const rootReducer = combineReducers({
31+
const transforms = [
32+
createFilter<IState, IPersistState>('application', ['environment']),
33+
createFilter<IState, IPersistState>('playground', ['editorValue']),
34+
createFilter<IState, IPersistState>('session', ['token', 'username', 'historyHelper'])
35+
]
36+
37+
const persistConfig: PersistConfig = {
38+
key: 'root',
39+
storage,
40+
transforms: [...transforms]
41+
}
42+
43+
const persistedReducer = persistCombineReducers<IState>(persistConfig, {
3044
...reducers,
3145
router: routerReducer
3246
})
33-
const enchancers = composeEnhancers(applyMiddleware(...middleware))
34-
const createdStore = _createStore(rootReducer, enchancers)
3547

48+
const enchancers = composeEnhancers(applyMiddleware(...middleware))
49+
const createdStore = _createStore(persistedReducer, enchancers) as Store<IState>
3650
sagaMiddleware.run(mainSaga)
3751
return createdStore
3852
}
3953

40-
export const store = createStore(appHistory) as Store<IState>
54+
function createPersistor(createdStore: Store<IState>) {
55+
return persistStore(createdStore)
56+
}
57+
58+
export const store = createStore(appHistory)
59+
export const persistor = createPersistor(store)

‎src/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from 'react'
2-
32
import { render } from 'react-dom'
43
import { Provider } from 'react-redux'
54
import { ConnectedRouter } from 'react-router-redux'
5+
import { PersistGate } from 'redux-persist/integration/react'
66

77
import ApplicationContainer from './containers/ApplicationContainer'
8-
import { store } from './createStore'
8+
import { persistor, store } from './createStore'
99
import { VERSION } from './utils/constants'
1010
import { history } from './utils/history'
1111
import registerServiceWorker from './utils/registerServiceWorker'
@@ -23,9 +23,11 @@ console.log(
2323

2424
render(
2525
<Provider store={store}>
26-
<ConnectedRouter history={history}>
27-
<ApplicationContainer />
28-
</ConnectedRouter>
26+
<PersistGate loading={null} persistor={persistor}>
27+
<ConnectedRouter history={history}>
28+
<ApplicationContainer />
29+
</ConnectedRouter>
30+
</PersistGate>
2931
</Provider>,
3032
rootContainer
3133
)

‎yarn.lock‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5067,7 +5067,7 @@ lodash.camelcase@^4.3.0:
50675067
version "4.3.0"
50685068
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
50695069

5070-
lodash.clonedeep@^4.3.2:
5070+
lodash.clonedeep@^4.3.2, lodash.clonedeep@^4.5.0:
50715071
version "4.5.0"
50725072
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
50735073

@@ -5083,6 +5083,10 @@ lodash.flattendeep@^4.4.0:
50835083
version "4.4.0"
50845084
resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
50855085

5086+
lodash.forin@^4.4.0:
5087+
version "4.4.0"
5088+
resolved "https://registry.yarnpkg.com/lodash.forin/-/lodash.forin-4.4.0.tgz#5d3f20ae564011fbe88381f7d98949c9c9519731"
5089+
50865090
lodash.get@^4.4.2:
50875091
version "4.4.2"
50885092
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -5091,6 +5095,10 @@ lodash.isboolean@^3.0.3:
50915095
version "3.0.3"
50925096
resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
50935097

5098+
lodash.isempty@^4.4.0:
5099+
version "4.4.0"
5100+
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
5101+
50945102
lodash.isequal@^4.1.1, lodash.isequal@^4.5.0:
50955103
version "4.5.0"
50965104
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -5119,6 +5127,14 @@ lodash.mergewith@^4.6.0:
51195127
version "4.6.1"
51205128
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
51215129

5130+
lodash.pickby@^4.6.0:
5131+
version "4.6.0"
5132+
resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
5133+
5134+
lodash.set@^4.3.2:
5135+
version "4.3.2"
5136+
resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
5137+
51225138
lodash.sortby@^4.7.0:
51235139
version "4.7.0"
51245140
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -5144,6 +5160,10 @@ lodash.uniq@^4.5.0:
51445160
version "4.5.0"
51455161
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
51465162

5163+
lodash.unset@^4.5.2:
5164+
version "4.5.2"
5165+
resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
5166+
51475167
"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:
51485168
version "4.17.5"
51495169
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@@ -7050,6 +7070,22 @@ redux-mock-store@^1.5.1:
70507070
dependencies:
70517071
lodash.isplainobject "^4.0.6"
70527072

7073+
redux-persist-transform-filter@^0.0.18:
7074+
version "0.0.18"
7075+
resolved "https://registry.yarnpkg.com/redux-persist-transform-filter/-/redux-persist-transform-filter-0.0.18.tgz#bc9901a0267bd64631099b4e7bb4d48c00647418"
7076+
dependencies:
7077+
lodash.clonedeep "^4.5.0"
7078+
lodash.forin "^4.4.0"
7079+
lodash.get "^4.4.2"
7080+
lodash.isempty "^4.4.0"
7081+
lodash.pickby "^4.6.0"
7082+
lodash.set "^4.3.2"
7083+
lodash.unset "^4.5.2"
7084+
7085+
[email protected]:
7086+
version "5.9.1"
7087+
resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.9.1.tgz#83bd4abd526ef768f63fceee338fa9d8ed6552d6"
7088+
70537089
redux-saga@^0.15.6:
70547090
version "0.15.6"
70557091
resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.15.6.tgz#8638dc522de6c6c0a496fe8b2b5466287ac2dc4d"

0 commit comments

Comments
 (0)