如何在继续之前先保存Redux State

Question

我有一个项目在React Native中使用React redux和redux-persistent:

这些是我主要使用的依赖项："expo"："^32.0.0"，"react"："16.5.0"，"redux"："^4.0.1"，"反应还原"："^5.1.1"，"redux persistent"："^5.10.0">

我想先让redux存储数据，然后将屏幕导航到另一个导航器。所以我尝试使用异步函数，结果发现它不起作用。但如果我不使用异步功能，它完全可以工作，但没有导航。

那么为什么要使用异步呢？因为在Redux从服务器保存我的用户信息之前，屏幕已经移到了另一个导航器上，而Redux无法保存用户信息

这就是我在登录屏幕中称redux操作的方式：

.then((responseJson) => {
console.log("Server Response: ", responseJson.data)
this.storeUserInformation(responseJson.data).then(() => {
this.toggleLoading()
this.props.navigation.navigate('AppNavigator')
})   
})
storeUserInformation = async (userInformation) => {
await this.props.saveUserInformation(userInformation)
}

const INITIAL_STATE = {
userAccountInformation: {},
userExpoToken: {},
}
const reducer = (state = INITIAL_STATE, action) => {
switch(action.type){
case USER_LOGIN:
console.log("UserAccountReducer", "calling USER_LOGIN")
return { userAccountInformation: action.payload.members }
case SAVE_USER_INFORMATION:
console.log("UserAccountReducer", "calling SAVE_USER_INFORMATION")
return { userAccountInformation: action.payload }
case USER_LOGOUT:
console.log("UserAccountReducer", "calling USER_LOGOUT")
return {state : {}}
case SAVE_EXPO_TOKEN:
console.log("UserAccountReducer", "calling SAVE_EXPO_TOKEN")
return { userExpoToken: action.payload }
default:
console.log("UserAccountReducer", "no Action Called")
return state
}
}
export default reducer

如果没有async，我的操作可以将信息从服务器保存到redux存储。但是因为在我调用this.props.navigate之后，操作还没有完成保存过程，在完成之前它会移动到另一个页面

我想让redux先从服务器保存数据，然后在保存数据后，导航到下一个屏幕

Answer 1

在减速器中，使一个初始状态为isDataLoaded，并将其设置为默认false。

当数据从API到达时，在减速器的适当情况下设置isDataLoaded到true的值。

然后在您的componentWillReceiveProps或componentDidUpdate中检查条件

if(this.props.isDataLoaded){
// your data is stored now you can do here navigate things
}

不要忘记将状态映射到此状态的道具isDataLoaded