应用程序以 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,我仍然无法弄清楚如何强制更新容器组件。
最佳答案
我按照这个食谱解决了这个问题:
delay-render-until-rehydration-complete
基本上解决方法如下:
在包裹 <Provider>
的组件中,创建一个本地状态标志来跟踪商店是否已经补水。使用persistStore() 的回调来更新这个标志。
在此包装器的渲染函数中,如果标志为真,则渲染 <Provider>
, 否则,渲染一些临时 View 。
关于react-native - 在使用 redux-persist 存储重新水化之前加载初始状态的默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38747080/