0

我在我的 React 应用程序中使用 redux-offline，除了页面首次加载时值“闪烁”之外，一切看起来都不错。在不到一秒钟的时间内，我可以看到存储变量的初始值，然后将其替换为持久值。

有解决办法吗？

这是我的商店代码：

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;
}
4

1 回答 1

1

您可以通过基于操作更新 redux 状态来跟踪状态何时重新水化redux-persist REHYDRATE。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;
}
于 2019-11-13T22:46:12.103 回答