React / Redux - действие asyn c работает без использования thunk - PullRequest
Новая
       63

React / Redux - действие asyn c работает без использования thunk

0 голосов
/ 24 марта 2020

Я недавно что-то пробовал в своем проекте, и я был очень удивлен, что это сработало. Я сделал следующее: - 

let result = {};
Axios.post("/auth", newUser).then(res => {
  // console.log(res);
  result = res.data;
  this.props.signupUser(result);
});

Приведенный выше код был написан внутри обработчика события onSubmit формы в реакции. Я хотел получить ответ от запроса POST и сохранить ответ в хранилище избыточных данных, и я попробовал приведенный выше код, и это сработало. Результат хранился в магазине редуксов. Итак, мой вопрос, это должно было сработать? и если да, то какова цель Redx Thunk?

signupUser - это создатель простых действий, функция, которая возвращает простой объект, а переменная newUser - это объект, который содержит данные формы.

1 Ответ

0 голосов
/ 24 марта 2020

Цель thunk - дать вам больше контроля над асинхронными c действиями. Пока ваш код работает, учтите некоторые более сложные требования:

  • Другой компонент React должен отображать анимацию загрузки во время выполнения запроса

  • Вы хотите отследить все ответы об ошибках API где-нибудь

  • после того, как пользователь зарегистрировался, вы хотите инициировать другие запросы для несвязанных ресурсов

Thunk облегчает все эти вещи более удобным способом. Вы также можете посмотреть текущее состояние притока в любой момент с помощью getState в действиях thunk. В общем, лучше разделить проблемы: компоненты React показывают форму регистрации и связаны с избыточными действиями. Действия заботятся о запросах API и обработке данных. Ничто не мешает вам писать весь этот код внутри компонента React, но в больших приложениях это быстро выйдет из-под контроля.

...