如何在继续之前先保存 Redux 状态？

Question

我有一个项目在 React Native 中使用了 React-redux 和 Redux-persist：

这些是我主要使用的依赖项： “世博”：“^32.0.0”， “反应”：“16.5.0”， "redux": "^4.0.1", "react-redux": "^5.1.1", "redux-persist": "^5.10.0"

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

那为什么要使用异步呢？因为在 Redux 从服务器保存我的用户信息之前，屏幕已经移动到另一个导航器，并且 redux 没有设法保存用户信息

这就是我在 LoginScreen 中调用 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

没有异步的东西，我的操作可以将信息从服务器保存到 redux 存储。但是因为在我调用this.props.navigate之后，action还没有完成保存过程，还没完成就移动到另一个页面

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

Answer 1

在你的 reducer 中设置一个初始状态，比如 isDataLoaded 设置为默认 false。

当数据从 API 到达时，在适当的 reducer 情况下将 isDataLoaded 的值设置为 true。

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

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

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