Redux ждут асинхронный поток продолжается - PullRequest
Новая
       22

Redux ждут асинхронный поток продолжается

0 голосов
/ 27 сентября 2018

В настоящее время я использую redux / redux-thunk, чтобы выбрать пользователя, использующего API-соус, например 

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`

Почему это происходит?

1 Ответ

0 голосов
/ 27 сентября 2018

Это связано с тем, что фактический вызов store.dispatch(fetchUser(authToken)) является синхронным - метод dispatch() не является асинхронным , поэтому ведение журнала "show login screen" будет происходить сразу после выполнения метода fetchUser().

Если вы хотите, чтобы 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'
    })
}

Надеюсь, это поможет!

...