Redux асинхронный actioncreator не распознает тогда - PullRequest
Новая
       10

Redux асинхронный actioncreator не распознает тогда

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

Мне нужно использовать .then() для действия с избыточностью, что не так в следующем действии? 

export const userLogin = (username, password) => {
  return dispatch => {
    axios.post(`${TT_API_BASE}/Access/Login`, { username: username, password: password, applicationId: 2 }, {
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Authorization': 'Basic ' + auth,
      }
    })
      .then(response => {
        dispatch({
          type: LOGIN,
          payload: response.data
        })
      })
      .catch(err => {
        console.log(err)
        dispatch({
          type: LOGIN_FAILED
        })
      })
  }
}

Затем вызывается в таком компоненте, как этот 

  handlePress() {
    this.props.userLogin(this.state.username, this.state.password)
      .then(() => {
        this.props.navigation.navigate('SelectInstance')
      })
  }

Которое отображает сообщение об ошибке, которое затем не определено. Что я делаю не так?

Ответы [ 2 ]

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

Решается так: 

export const userLogin = (username, password) => {
  return async dispatch => {
    const onSuccess = data => {
      dispatch({
        type: LOGIN,
        payload: data
      })
    }
    const onError = err => {
      dispatch({
        type: LOGIN_FAILED
      })
    }
    try {
      const req = await axios.post(`${TT_API_BASE}/Access/Login`, { username: username, password: password, applicationId: 2 }, {
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          'Authorization': 'Basic ' + auth,
        }
      })
      return onSuccess(req.data)
    }
    catch (err) {
      return onError(err)
    }
  }
}
0 голосов
/ 04 сентября 2018

Когда вы делаете dispatch(someThunkActionCreator()), возвращаемое значение dispatch - это то, что возвращает функция thunk. Таким образом, вы можете выполнить dispatch().then(), только если функция thunk возвращает обещание.

Ваш переводчик выполняет вызов AJAX, но фактически не возвращает обещание, поэтому он фактически возвращает undefined. Помещение оператора return перед axios.post() вернет это обещание и решит проблему.

...