From bf659a25c408b807e7978d47c8a999614a145380 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robert=20H=C3=B6nig?= Date: Thu, 5 Jul 2018 21:53:24 +0200 Subject: [PATCH] Upgrade redux-persist from 4.10.2 to 5.10.0 redux-persist v5 introduces a couple breaking changes. These are described in detail in https://github.com/rt2zz/redux-persist/blob/master/docs/MigrationGuide-v5.md The most notable change is the removal of autoHydrate(). Additionally, redux-persist v5 clashes with redux-action-buffer which we use as well. redux-persist v5 has a somewhat different initialization flow than 4.10.2 and dispatches some new actions during initialization. This makes it incompatible with `redux-action-buffer`, because redux-action-buffer silently buffers all these actions which prevents the redux-dispatch init from completing. Therefore, get rid of `redux-action-buffer` and replace it with the new `PersistGate` that ships with redux-persist v5. --- package.json | 3 +-- src/boot/StoreProvider.js | 19 ++++++++++--------- src/boot/middleware.js | 4 +--- src/boot/store.js | 30 +++++++++++++++++------------- yarn.lock | 25 ++++++++++++++----------- 5 files changed, 43 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 1347a162baf..46887f72c41 100644 --- a/package.json +++ b/package.json @@ -67,10 +67,9 @@ "react-redux": "^5.0.7", "react-test-renderer": "16.3.2", "redux": "^4.0.0", - "redux-action-buffer": "^1.2.0", "redux-batched-actions": "^0.3.0", "redux-logger": "^3.0.1", - "redux-persist": "^4.10.2", + "redux-persist": "^5.7.0", "redux-thunk": "^2.1.0", "reselect": "^3.0.1", "stream": "^0.0.2", diff --git a/src/boot/StoreProvider.js b/src/boot/StoreProvider.js index cb25af68dbf..1c6102fa9f5 100644 --- a/src/boot/StoreProvider.js +++ b/src/boot/StoreProvider.js @@ -1,24 +1,25 @@ /* @flow */ import React, { PureComponent } from 'react'; import { Provider } from 'react-redux'; +import { PersistGate } from 'redux-persist/lib/integration/react'; import type { ChildrenArray } from '../types'; -import store, { restore } from './store'; +import store, { persistor } from './store'; import timing from '../utils/timing'; +import LoadingScreen from '../start/LoadingScreen'; type Props = { children: ChildrenArray<*>, }; export default class StoreHydrator extends PureComponent { - componentDidMount() { - timing.start('Store hydration'); - restore(() => { - timing.end('Store hydration'); - }); - } - render() { - return {this.props.children}; + return ( + + } persistor={persistor}> + {this.props.children} + + + ); } } diff --git a/src/boot/middleware.js b/src/boot/middleware.js index ed22cd2ef67..5e0f7156737 100644 --- a/src/boot/middleware.js +++ b/src/boot/middleware.js @@ -1,15 +1,13 @@ /* @flow */ import thunk from 'redux-thunk'; import { createLogger } from 'redux-logger'; -import createActionBuffer from 'redux-action-buffer'; import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers'; import config from '../config'; -import { REHYDRATE } from '../actionConstants'; const reactNavigationMiddleware = createReactNavigationReduxMiddleware('root', state => state.nav); -const middleware = [reactNavigationMiddleware, thunk, createActionBuffer(REHYDRATE)]; +const middleware = [reactNavigationMiddleware, thunk]; if (config.enableReduxLogging) { middleware.push( diff --git a/src/boot/store.js b/src/boot/store.js index 6df8d87dff5..456746dc06d 100644 --- a/src/boot/store.js +++ b/src/boot/store.js @@ -1,7 +1,8 @@ /* @flow */ import { AsyncStorage } from 'react-native'; -import { applyMiddleware, compose, createStore } from 'redux'; -import { persistStore, autoRehydrate } from 'redux-persist'; +import { applyMiddleware, createStore, compose, autoMergeLevel1 } from 'redux'; +import { persistStore, persistReducer } from 'redux-persist'; +import getStoredStateMigrateV4 from 'redux-persist/lib/integration/getStoredStateMigrateV4'; import config from '../config'; import rootReducer from './reducers'; @@ -14,17 +15,20 @@ import middleware from './middleware'; // rootReducer, // compose(autoRehydrate(), applyMiddleware(...middleware)), // ); +const reduxPersistConfigV4 = { + whitelist: [...config.storeKeys, ...config.cacheKeys], + storage: AsyncStorage, +}; +const reduxPersistConfig = { + key: 'root', + whitelist: [...config.storeKeys, ...config.cacheKeys], + storage: AsyncStorage, + stateReconciler: autoMergeLevel1, + getStoredState: getStoredStateMigrateV4(reduxPersistConfigV4), +}; +const reducer = persistReducer(reduxPersistConfig, rootReducer); +const store = createStore(reducer, undefined, compose(applyMiddleware(...middleware))); -const store = compose(applyMiddleware(...middleware), autoRehydrate())(createStore)(rootReducer); - -export const restore = (onFinished?: () => void) => - persistStore( - store, - { - whitelist: [...config.storeKeys, ...config.cacheKeys], - storage: AsyncStorage, - }, - onFinished, - ); +export const persistor = persistStore(store); export default store; diff --git a/yarn.lock b/yarn.lock index 961a4db2e8d..9306d9b66a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4598,14 +4598,14 @@ locate-path@^2.0.0: p-locate "^2.0.0" path-exists "^3.0.0" -lodash-es@^4.17.4, lodash-es@^4.2.1: - version "4.17.4" - resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7" - lodash-es@^4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.5.tgz#9fc6e737b1c4d151d8f9cae2247305d552ce748f" +lodash-es@^4.2.1: + version "4.17.4" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7" + lodash._basebind@~2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/lodash._basebind/-/lodash._basebind-2.4.1.tgz#e940b9ebdd27c327e0a8dab1b55916c5341e9575" @@ -4896,7 +4896,7 @@ lodash.uniqby@^4.4.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302" -lodash@4.x.x, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.14.1, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: +lodash@4.x.x, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.14.1, lodash@^4.15.0, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -4904,6 +4904,10 @@ lodash@^3.3.1, lodash@^3.5.0: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" +lodash@^4.17.4: + version "4.17.10" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" + lodash@^4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" @@ -6321,10 +6325,6 @@ realpath-native@^1.0.0: dependencies: util.promisify "^1.0.0" -redux-action-buffer@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/redux-action-buffer/-/redux-action-buffer-1.2.0.tgz#2ec0a1d899cc9f6f44ccdeb431ee52ad41dd9755" - redux-batched-actions@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/redux-batched-actions/-/redux-batched-actions-0.3.0.tgz#5bb8f4444d46b6c7a5a51e9fdfb58f70de03ff2b" @@ -6346,8 +6346,11 @@ redux-persist@^4.10.2: resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-4.10.2.tgz#8efdb16cfe882c521a78a6d0bfdfef2437f49f96" dependencies: json-stringify-safe "^5.0.1" - lodash "^4.17.4" - lodash-es "^4.17.4" + lz-string "^1.4.4" + +redux-persist@^5.7.0: + version "5.10.0" + resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b" redux-thunk@^2.1.0: version "2.2.0"