redux脱机应用程序在第一次加载时闪烁InitialState值

Question

我在React应用程序中离线使用redux，除了第一次加载页面时值"闪烁"之外，其他一切看起来都很好。在不到一秒钟的时间里，我可以看到存储变量在被持久值替换之前的初始值。

有解决办法吗？

这是我的商店代码：

import { reducer as reduxFormReducer, FormStateMap } from 'redux-form';
import { connectRouter, routerMiddleware, RouterState } from 'connected-react-router';
import { combineReducers, createStore, applyMiddleware, Store, compose } from 'redux';
import { History, createBrowserHistory } from 'history';
import { offline, createOffline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';
import thunk from 'redux-thunk';
// state
export interface IAppState {
readonly form: FormStateMap;
readonly router: RouterState;
...
}
// tslint:disable-next-line:no-empty
export const neverReached = (never: never) => {};
export const history = createBrowserHistory();
const rootReducer = ((history: History) => combineReducers<IAppState>({
form: reduxFormReducer,
router: connectRouter(history),
...
}))(history);
const { middleware, enhanceReducer, enhanceStore } = createOffline(offlineConfig);
export function configureStore(): Store<IAppState> {
// This line is suspect, not sure if this is the middleware required
const store = createStore(
enhanceReducer(rootReducer), 
undefined,
compose(
applyMiddleware(middleware, routerMiddleware(history), thunk),
enhanceStore));
return store;
}

Answer 1

您可以通过基于redux-persistREHYDRATE操作更新redux状态来跟踪状态何时重新水合。redux-offline将动作类型常量重新导出为PERSIST_REHYDRATE。像下面这样的简单减速器就足够了。

import {PERSIST_REHYDRATE} from '@redux-offline/redux-offline/lib/constants';
function rehydratedReducer = (state = {rehydrated: false}, action) {
if (action.type === PERSIST_REHYDRATE) {
return {rehydrated: true};
}
return state;
}