我在使用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}导入
export default function reducer(state = initialState, action){
switch (action.type) {
case REHYDRATE_STORE:
return {...state, storeIsReady:true}
break;
default:
return state
break;
}
}
但是，虽然在补液完成后storeIsReady状态变为true，但我仍然无法弄清楚如何强制更新容器组件 .
1 回答
我按照这个食谱解决了这个问题：delay-render-until-rehydration-complete
基本上解决方案如下：
在包装
<Provider>的组件中，创建一个本地状态标志，用于跟踪商店是否已经重新水化 . 使用persistStore（）的回调来更新此标志 . 在此包装器的render函数中，如果标志为true，则渲染<Provider>，否则，渲染一些临时视图 .