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

Question

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

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

我知道数据保存和提取成功了。如果我将屏幕留给另一个屏幕然后返回，我可以看到数据显示正确。调试状态和道具也表明这是一个异步计时问题。

如何将 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 都在一个动作中被调用），我尝试创建一个在商店完成加载时触发的动作：

import { REHYDRATE_STORE } from './types'

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

它是减速器：从 '../actions/types' 导入 { REHYDRATE_STORE } const 初始状态 = { 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>，否则渲染一些临时视图。

Answer 2

您可以使用 PeristGate 包装您的商店：

import { PersistGate } from 'redux-persist/integration/react'

<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    <RootComponent />
  </PersistGate>
</Provider>

这将显示自定义加载屏幕（或无加载屏幕），直到您的商店使用持久数据重新水化。

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

default values from initial state are loaded before store rehydrates with redux-persist

react-native

redux

asyncstorage