Question

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

这些是我主要使用的依赖项： “ expo”：“ ^ 32.0.0”， “ react”：“ 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之后，该动作尚未完成保存过程，因此在完成之前会移动到另一页

我想让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

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

1 个答案: