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

«Простота — необходимое условие надежности». — Эдсгер В. Дейкстра

1. Проблема асинхронных действий

Во многих приложениях вы столкнетесь со сценариями, в которых определенные операции являются асинхронными — например, получение данных из API, манипулирование этими данными, а затем обновление вашего хранилища Redux на основе результата. По умолчанию действия Redux отправляются синхронно, что означает, что они выполняются немедленно.

Для обработки асинхронных операций нам необходимо расширить возможности Redux с помощью функции, известной как промежуточное ПО.

2. Познакомьтесь с Redux Thunk

Redux Thunk — популярное промежуточное ПО для обработки асинхронных действий в Redux. Это позволяет нам писать генераторы действий, которые возвращают функцию вместо объекта действия. Затем эту функцию можно использовать для приостановки отправки действия, что позволяет нам отправлять другое действие после завершения асинхронных операций.

Давайте рассмотрим практический пример, включающий получение данных из API:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// Assume rootReducer is your root reducer
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

// Action creator for the start of API call
function fetchTodosRequest() {
  return {
    type: 'FETCH_TODOS_REQUEST'
  };
}

// Action creator for successful API call
function fetchTodosSuccess(todos) {
  return {
    type: 'FETCH_TODOS_SUCCESS',
    payload: todos
  };
}

// Action creator for failed API call
function fetchTodosFailure(error) {
  return {
    type: 'FETCH_TODOS_FAILURE',
    payload: error
  };
}

// The Redux Thunk! It's a function that returns a function.
// This function can dispatch multiple actions, thanks to Redux Thunk middleware.
function fetchTodos() {
  return async dispatch => {
    dispatch(fetchTodosRequest());

    try {
      const response = await fetch('/api/todos'); // Making the API call
      const todos = await response.json(); // Transforming the received data to JSON

      // If successful, dispatching the fetchTodosSuccess action with the received data
      dispatch(fetchTodosSuccess(todos));
    } catch (error) {
      // If an error occurs, dispatching the fetchTodosFailure action with the error message
      dispatch(fetchTodosFailure(error));
    }
  };
}

store.dispatch(fetchTodos());

В приведенном выше примере fetchTodos — это создатель действий, работающий на Redux Thunk. Это позволяет нам отправлять действия асинхронно. Вот что происходит:

  1. Начнем с отправки действия fetchTodos.
  2. Внутри fetchTodos мы сначала отправляем fetchTodosRequest, чтобы указать, что мы начинаем получать задачи.
  3. Затем мы делаем вызов API для получения задач. Поскольку эта операция асинхронная, мы используем await для приостановки выполнения до завершения операции.
  4. Если вызов API успешен, мы преобразуем данные ответа в формат JSON, а затем отправляем действие fetchTodosSuccess с данными todos.
  5. Если во время вызова API возникает ошибка, мы перехватываем ее и отправляем действие fetchTodosFailure с сообщением об ошибке.

крутая работа! Мы только что углубились в Redux Thunk и обработку асинхронных действий в Redux. Это большой скачок в вашем путешествии по Redux. В следующих уроках мы рассмотрим более сложные темы, такие как обработка больших и сложных состояний в Redux. Продолжайте в том же духе и счастливого кодирования!

Если вам понравилась статья и вы хотите выразить свою поддержку, сделайте следующее:

👏 Аплодируйте истории (50 аплодисментов), чтобы эта статья попала в топ

👉Подпишитесь на меня в Среднем

Посмотрите больше контента в моем профиле Medium