在存储使用redux-persist重新水合之前加载初始状态的默认值

Question

应用程序启动后使用redux-persist访问保存的数据时遇到问题.

reducer使用我初始状态中定义的数据进行初始化.当前一个会话的状态加载AsyncStorage时,该组件已显示默认数据.

我知道数据已成功保存和获取.如果我将屏幕留给另一个并回到它,我可以看到数据显示正确.调试状态和道具也表明这是一个异步计时问题.

如何在商店补充水分后延迟加载redux容器.或者,我可以在商店完成加载时强制更新conatainer(及其子代)以进行更新吗？

这是我尝试过的.配置我的商店:

export default function configureStore(initialState) {
    const middlewares = [thunk];
    if (process.env.NODE_ENV === `development`) {
        const createLogger = require(`redux-logger`);
        const logger = createLogger();
        middlewares.push(logger);
    }

    let store = compose(
        applyMiddleware(...middlewares),
        autoRehydrate() )(createStore)(reducers);

        persistStore(store, {blacklist: ['routing'], storage: AsyncStorage}, () => {
            store.dispatch(storeRehydrateComplete())
        })


    return store
}

希望这会更新所有其他组件(因为redux中的所有reducer都在一个动作中被调用),我尝试创建一个在商店完成加载时触发的动作:

import { REHYDRATE_STORE } from './types'

export function storeRehydrateComplete(){
    return {
        type: REHYDRATE_STORE,
    }
}

它是reducer:从{./actions/types'const initialState = {storeIsReady:false}导入{REHYDRATE_STORE}

export default function reducer(state = initialState, action){
    switch (action.type) {
        case REHYDRATE_STORE:
            return {...state, storeIsReady:true}
            break;
        default:
            return state
            break;
    }
}

但是,虽然在补液完成后storeIsReady状态变为true,但我仍然无法弄清楚如何强制更新容器组件.

Answer 1

我按照这个方法解决了这个问题: 延迟渲染直到补液完成

基本上解决方案如下:
在包装的组件中<Provider>,创建一个本地状态标志,用于跟踪商店是否已经重新水化.使用persistStore()的回调来更新此标志.在此包装器的render函数中,如果标志为true,则渲染<Provider>,否则渲染一些临时视图.