Redux等待异步thunk继续前进

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Redux等待异步thunk继续前进相关的知识,希望对你有一定的参考价值。

我目前正在使用redux / redux-thunk来获取使用api-sauce的用户

let authToken = await AsyncStorage.getItem('@TSQ:auth_token')

if (authToken) {
  store.dispatch(fetchUser(authToken))
  console.log('show login screen')
  // dont worry, if the token is invalid, just send us to onboarding (api determines this)
  loggedInView()
} else {
  Onboarding ()
}

....

export const fetchUser = authToken => async dispatch => {
  console.log('dispatching auth token')

  console.log('here goes request')
  let res = await api.get(`/auth/${authToken}`);

  if (res.ok) {
    console.log('have the user')
    dispatch(
      setUser(res.data)
    )
  } else {
    dispatch({
      type: 'SET_USER_DEFAULT'
    })
}

}

运行此代码时,用户仍在加载,并且console.logs不按顺序排列

`dispatching auth token`
`here goes request`
`show login screen`

为什么会这样?

答案

这是因为对store.dispatch(fetchUser(authToken))的实际调用是同步的 - dispatch()方法is not asynchronous,因此在执行fetchUser()方法之后立即发生日志记录“show login screen”。

如果您希望在从网络请求返回响应后执行loggedInView()(即调用异步方法api.get()),那么您可以考虑以下列方式重构代码:

if (authToken) {
  store.dispatch(fetchUser(authToken))
  // Remove navigation from here
} else {
  Onboarding ()
}

然后:

export const fetchUser = authToken => async dispatch => {
  console.log('dispatching auth token')

  console.log('here goes request')
  let res = await api.get(`/auth/${authToken}`);

  if (res.ok) {
    console.log('have the user')

    // Occurs after network request is complete    
    console.log('show login screen')

    // Add navigation here to go to logged in view now that request is complete
    loggedInView()

    dispatch(
      setUser(res.data)
    )
  } else {
    dispatch({
      type: 'SET_USER_DEFAULT'
    })
}

希望这可以帮助!

以上是关于Redux等待异步thunk继续前进的主要内容,如果未能解决你的问题,请参考以下文章

Redux thunk:如何等待异步操作的完成

Redux thunk:等待异步函数调度

如何键入 Redux thunk 动作创建者以返回承诺

使用 axios 的 redux-thunk 的通用数据加载器

React + redux + axios + thunk,等待interceptors.response 刷新token

Redux-Thunk - 异步动作创建者承诺和链接不起作用