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

Question

应用程序以 redux-persist 启动后，我无法访问保存的数据.

reducer 使用在我的初始状态中定义的数据进行初始化。当使用 AsyncStorage 加载上一个 session 的状态时，该组件已经显示为默认数据。

我知道数据已保存并成功获取。如果我将屏幕留在另一个屏幕上然后再回到它，我可以看到数据显示正确。调试状态和 Prop 也表明这是一个异步时序问题。

如何将 redux 容器的加载延迟到商店重新水化之后。或者，我可以强制更新容器(及其子容器)以在商店完成加载时进行更新吗？

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

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 都是在一个 Action 中调用的)，我尝试创建一个在商店完成加载时触发的 Action :

import { REHYDRATE_STORE } from './types'

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

它是 reducer :
从'../actions/types' 导入 { REHYDRATE_STORE }
常量初始状态 = {
storeIsReady: 假
}

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

我按照这个食谱解决了这个问题:
delay-render-until-rehydration-complete

基本上解决方法如下:
在包裹 <Provider> 的组件中，创建一个本地状态标志来跟踪商店是否已经补水。使用persistStore() 的回调来更新这个标志。
在此包装器的渲染函数中，如果标志为真，则渲染 <Provider> , 否则，渲染一些临时 View 。