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

Posted 2023-02-19

【中文标题】在使用 redux-persist 重新水化存储之前加载初始状态的默认值

【英文标题】：default values from initial state are loaded before store rehydrates with redux-persist

【发布时间】：2016-12-09 09:08:36

【问题描述】：

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

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

我知道数据已成功保存和提取。如果我离开屏幕到另一个屏幕并返回它，我可以看到数据显示正确。调试 state 和 props 也表明这是一个异步计时问题。

如何将 redux 容器的加载延迟到 store 补水后。或者，我可以在商店加载完成时强制更新容器（及其子容器）吗？

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

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 中的所有减速器都在一个操作中调用），我尝试创建一个在商店加载完成时触发的操作：

import  REHYDRATE_STORE  from './types'

export function storeRehydrateComplete()
    return 
        type: REHYDRATE_STORE,
    

它是减速器： 从“../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，但我仍然不知道如何强制更新容器组件。

【问题讨论】：

如果让容器接收storeIsReadymapStateToProps，会触发componentWillReceiveProps吗？另外，不需要你自己的动作类型，因为你在 redux-persist 中有一个特殊的动作，import REHYDRATE from 'redux-persist/constants';

【参考方案1】：

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

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

【讨论】：

无法再访问此文件的任何人：github.com/rt2zz/redux-persist/blob/…