Redux thunk: ожидание отправки асинхронной функции - PullRequest
Новая
       7

Redux thunk: ожидание отправки асинхронной функции

2 голосов
/ 07 мая 2019

Я создаю приложение React Native и использую redux и redux-thunk для реализации моих запросов API. Я хотел бы знать, как я могу ждать отправки моего действия и убедиться, что мое состояние было обновлено в логике асинхронного потока. Если я правильно понимаю, await будет ждать конца thunk, но действие еще не отправлено. Хотя, как вы можете видеть из моего использования, мне нужно изменить состояние, чтобы продолжить выполнение остальной части кода соответственно.

actions / user.js 

export const tryLogin = (
  email: string,
  password: string,
  sessionToken: string = ''
): Function => async (dispatch: Function) => {
  const logUser = () => ({ type: LOG_USER })

  const logUserSuccess = (data: any, infos: any) => ({
    type: LOG_USER_SUCCESS,
    data,
    infos,
  })

  const logUserError = (signinErrorMsg: string) => ({
    type: LOG_USER_ERROR,
    signinErrorMsg,
  })

  dispatch(logUser())

  try {
    { /* Some API requests via axios */ }

    dispatch(logUserSuccess(responseJson, infos))
    return true
  } catch (error) {
    { /* Error handling code */ }

    dispatch(logUserError(error.response.data.error))
    return false
}

редукторы / user.js 

case LOG_USER:
  return {
    ...state,
    isLoggingIn: true,
  }
case LOG_USER_SUCCESS:
  return {
    ...state,
    isLoggingIn: false,
    data: action.data,
    infos: action.infos,
    error: false,
    signinErrorMsg: '',
  }
case LOG_USER_ERROR:
  return {
    ...state,
    isLoggingIn: false,
    error: true,
    signinErrorMsg: action.signinErrorMsg,
  }

RegisterScreen.js 

if (await trySignup(
    emailValue,
    firstNameValue,
    lastNameValue,
    passwordValue,
    birthdateValue,
    genderValue
  )
) {
  if (userReducer.data) {
    navigation.navigate('Secured')
  }

Ответы [ 2 ]

2 голосов
/ 07 мая 2019

В Redux, Когда действие отправляется в хранилище, оно автоматически обновляет состояние интерфейса с новыми реквизитами.

Вместо просмотра отправленного действия, вы можете добавить флаг в редуктор signUpSuccess, аналогичный флагу isLoggingIn, и прослушать изменения в componentDidUpdate методе жизненного цикла.

trySignup можно вызывать отдельно (например, для события, formSubmit, нажатия кнопки и т. Д.)

RegisterScreen.js 

class RegisterScreen extends React.Component{
...
componentDidUpdate(prevProps) {
  if (prevProps.signUpSuccess !== this.props.signUpSuccess){
    if (this.props.signUpSuccess) {
      navigation.navigate('Secured')
    }
  }
}
...
}
const mapStateToProps = (state) => ({
  signUpSuccess: state.userReducer.signUpSuccess,
});

export default connect(mapStateToProps)(RegisterScreen);
1 голос
/ 07 мая 2019

Если я правильно понимаю, await будет ждать конца thunk, но действие еще не отправлено.

  • Render может быть обновлен, если в реквизитах произошли какие-либо изменения, поэтому извлеките реквизиты в вашем методе рендеринга и обновите UX в соответствии с изменением реквизитов.
  • Я бы предложил использовать Реагировать на собственный отладчик , чтобы проверить ваши действия и текущее сохраненное состояние.
...