Redux-persist与不可变映射不持久状态更改

时间:2018-04-06 10:58:56

标签: state immutability redux-saga redux-persist

我正在使用redux-persist,我的整个状态树存储为不可变的映射,如下面的store.js文件代码所示。

import {persistReducer, persistStore} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1'
import { Record } from 'immutable';
import immutableTransform from 'redux-persist-transform-immutable';
const history = createHistory();
const middlewares = [thunk, sagaMiddleware, routeMiddleware, ReduxPromise];
// some imports omitted in the interest of brevity.
let persistor;

const MyRecord = Record({
    App : {},
    Auth : {},
    Box  : {},
    Calendar : {},
    Cards : {},
    Contacts : {},
    Course : {},
    DynamicChartComponent : {},
    Ecommerce : {},
    LanguageSwitcher : {},
    Mails : {},
    Notes : {},
    ThemeSwitcher : {},
    Todos : {},
    User : {},
    YoutubeSearch : {},
    githubSearch : {}
}, 'MyRecord')

const persistConfig = {
    transforms: [immutableTransform({records: [MyRecord]})],
    key: 'root',
    storage,
    stateReconciler: autoMergeLevel1
}

const persistedReducer = persistReducer(persistConfig, combineReducers({
    ...reducers,
    router: routerReducer
}));


const loggerMiddleware = createLogger({
    predicate: () => process.env.NODE_ENV === 'development',
});
middlewares.push(loggerMiddleware);

export default () => {
    let store = createStore(persistedReducer, compose(applyMiddleware(...middlewares), reduxReset()))
    sagaMiddleware.run(rootSaga);
    persistor = persistStore(store);
    return { store, history, persistor }
}

export function getPersistor() {
    return persistor;
}

我的问题是,即使我对状态树进行了更改(我已经确认,实际上确实按照应用的方式进行了更改,使用redux记录器),尽管我的应用程序在刷新时仍未显示更改事实上,我这样称为persistor.flush():

export function* materialUpdate() {
    yield takeEvery(actions.COURSE_MAT_UPDATE, function*() {
        let secs = 2;
        while (secs > 0) {
            yield call(delay, 1000);
            secs--;
        }
        // const flushData = persistor => persistor.flush();
        // const persistor = yield call(getPersistor);
        yield put(getPersistor().flush);
    });
}

状态改变后(也验证了冲洗动作触发)。我已经尝试了一切,我真的很感激任何有关此事的建议。提前谢谢。

0 个答案:

没有答案