Рубрики
Без рубрики

Как создать свое первое промежуточное программное обеспечение Redux с легкостью

Gabriele CiMato Как создать свое первое промежуточное программное обеспечение redux с EasePhoto по Jeshoots.com на unsplashalmastermach App App React Real-Word имеет широкое использование Async запросов. Если вы управляете своим состоянием приложения с Redux, существует несколько способов обрабатывать асинхронные действия. Возможно, вы слышали о Redux-Thunkor Redux-Saga,

Автор оригинала: FreeCodeCamp Community Member.

Габриэле CiMato

Почти каждое реальное приложение Real-Word обеспечивает широкое использование Async запросов. Если вы управляете своим состоянием приложения с Redux, существует несколько способов обрабатывать асинхронные действия.

Вы, возможно, слышали о Redux-Thunk или Redux-Saga самые популярные решения для обработки асинхронизированных действий в Redux. Такие подходы пригодны, когда вам нужно отслеживать статус запроса в вашем штате.

Шаблон, который я видел довольно часто, которые используют Thunks следующее:

import {
  FETCH_DATA_ERROR,
  FETCH_DATA_PENDING,
  FETCH_DATA_SUCCESS,
} from 'constants/actionTypes';

function fetchMyDataError(error) {
  return {
    type: FETCH_DATA_ERROR,
    payload: error,
  };
}

function fetchDataPending() {
  return { type: FETCH_DATA_PENDING };
}

function fetchMyDataSuccess(response) {
  return {
    type: FETCH_DATA_SUCCESS.
    payload: response,
  };
}

function fetchData() {
  return (dispatch) => {
    dispatch(fetchDataPending());
      
    fetch('https://my-api.com/my-data')
      .then(res => res.json())
      .then(data => dispatch(fetchMyDataSuccess(data)))
      .catch(err => dispatch(fetchMyDataError(err)));
  };
}

Как видите, мы написали хорошее количество кода. Этот пример может быть упрощен и обрабатывается только с одной функцией. В любом случае, он скоро почувствует очень повторяющуюся и утомительно, особенно если вам нужно отслеживать срок службы каждого запроса Async в вашем приложении. Такая полкость не помогает с помощью котельной необходимой для приложения, которое использует Redux.

Когда шаблон или код кода снова используются снова и снова, это хорошая практика, чтобы извлечь его в функцию. Это будет абстрактным логикой этого и требует только наименьшего количества данных для «функции». Вот когда я начал играть с идеей написания собственного промежуточного программного обеспечения. Redux-Slim-async Помогает мне пропустить код BoaterPlate и обеспечить отличный контроль с крошечным API. Давайте посмотрим сейчас предыдущий пример с новым промежуточным программным обеспечением:

import {
  FETCH_DATA_PENDING,
  FETCH_DATA_SUCCESS,
  FETCH_DATA_ERROR,
} from 'constants/actionTypes';

function fetchData() {
  return {
    types: [
      FETCH_DATA_PENDING,
      FETCH_DATA_SUCCESS,
      FETCH_DATA_ERROR,
    ],
    callAPI: fetch('https://my-api.com/my-data')
      .then(res => res.json()),
  }
}

Все эти неловкие функции ушли и наша Fetchdata сейчас минимально – довольно аккуратно! ?

Теперь давайте построим меньшую версию такого промежуточного программного обеспечения. Это поможет нам понять внутреннюю работу ИТ и эй, вы сможете построить свой собственный следующий!

Создание промежуточного программного обеспечения

Позвольте мне показать вам код для этого небольшого промежуточного программного обеспечения. Вы увидите, что это не так, как вы думаете.

function createSlimAsyncMiddleware({ dispatch, getState }) {
  return next => action => {
    const {
      types,
      callAPI,
      shouldCallAPI = () => true,
    } = action;
      
    if (!actionIsValid(action)) next(action);
    if (!shouldCallAPI(getState())) {
      return Promise.resolve(getState());
    }
      
    const [pendingType, successType, errorType] = types;
      
    dispatch({ type: pendingType });
      
    return callAPI()
      .then(response => {
        dispatch({
          type: successType,
          payload: response,
        });
        
        return Promise.resolve(getState());
      })
      .catch(error => {
        dispatch({
          type: errorType,
          payload: error,
        });
        
        return Promise.reject(error);
     });
  };
}

Подождите секунду … Вот и все? Абсолютно!

Давайте пойдем одну очередь за раз. Это промежуточное программное обеспечение – это функция, которая возвращает функцию, которая возвращает функцию, которая возвращает A Обещание Отказ Как звучит Funky, вы обнаружите, что это намного проще, чем кажется.

Наша функция промежуточного программного обеспечения получает объект с двумя полями: Отправка и Гутрите Отказ Это названные параметры Предоставляется Redux.

  • Отправка В качестве имени предполагает, что это то, что мы используем для отправки действия. Это даст нам силу обращения с действиями внутри промежуточного программного обеспечения
  • Гутрите : Это функция, которая возвращает текущее состояние в данный момент времени. Это может быть полезно, если мы хотим вернуть обновленное состояние после отправки действия

На Первая линия У нас есть функция с одним аргументом объекта с полями Отправка и Гутрите Отказ

На Вторая линия Мы возвращаем функцию, которая принимает аргумент под названием Следующий Отказ Такая функция возвращает функцию, которая занимает Действие и делает что-то. Больше на этом позже. Но что такое Следующий для ? Почему мы должны вернуть функцию, которая возвращает функцию, которая что-то делает?

Какой redux делает под капотом составить Подразделение, так что у каждого есть ссылка на … Следующий один! Имя много помогает сделать это интуитивным. Мы обертываем официальный redux Отправка функционировать с нашим промежуточным программным обеспечением. Это создает трубопровод, который должен пройти действие.

Помните, что вам не нужно звонить Далее (действие) , но вам нужно сделать, если вы не хотите заблокировать процесс диспетчера (мы увидим конкретный случай в нашем промежуточном программе).

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

ActionisValid это хорошее место для проверки на наличие ошибок и бросить их при необходимости. Если это неверно, то я буду использовать нашу ссылку на Следующий промежуточное программное обеспечение и передайте ему действие. В противном случае мы, наконец, мы можем использовать действие и «сделать что-то» (блок-схему выше, представляет собой упрощенную версию этой логики).

Остальная промежуточная программа довольно интуитивна. Мы проверяем достоверность действия, чтобы определить, должен ли наш асинхронный запрос продолжать или нет.

Towncallapi является параметром нашего промежуточного программного обеспечения API. Учитывая государство, он возвращает логию, который определяет, должен ли наш запрос выполнять или нет. Промежуточное программное обеспечение обеспечивает значение по умолчанию для него (функция, которая возвращает True ). Если нам не нужно сделать вызов API, то мы возвращаем Обещание Отказ Таким образом, мы можем использовать .then или Async/await на любое асинхронное действие, которое проходит через нашу промежуточное программное обеспечение.

const [pendingType, successType, errorType] = types;

Следующим шагом является определение действия Тип поле, переданное в качестве параметра. Мы используем массив Разрушение разобрать наше Типы Параметр массива.

dispatch({ type: pendingType });

Теперь мы можем, наконец, использовать Отправка метод. Это рассылает действие redux, как вы обычно делаете. Такое действие представляет собой «в ожидании» состояния нашего асинхронизации.

return callAPI()
  .then(response => {
    dispatch({
      type: successType,
      payload: response,
    });
    
    return Promise.resolve(getState());
  })
  .catch(error => {
    dispatch({
      type: errorType,
      payload: error,
    });
    
    return Promise.reject(error);
  });

Мы наконец у нас есть наш последний Возвращение утверждение. Здесь мы делаем вызов API и, основываясь на том, как Обещание Решает, мы отправляем и вернем разные значения.

  • Успех : Учитывая ответ от API, мы отправляем действие успеха. Полезная нагрузка является ответом запроса. Сразу после этого мы возвращаем Обещание Это решает с современным состоянием нашего приложения. Это позволяет нам использовать .then (updatedstate => ... делать somethi ng)
  • Ошибка: Если Обещание Отклонись, затем мы отправляем ошибку действий. В этом случае полезная нагрузка сама ошибка.

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

// Our Action

function fetchData() {
  return {
    types: [
      FETCH_DATA_PENDING,
      FETCH_DATA_SUCCESS,
      FETCH_DATA_ERROR,
    ],
    shouldCallAPI: state => state.dataArr.length === 0,
    callAPI: () =>
      fetch('https://my-api.com/my-data').then(res => res.json()),
  }
}

// Inside the component

class MyComponent extends Component {
  componentDidMoun() {
    this.props.fetchData()
      .then(state => {
        console.log('updated state after async action:', state);
      })
      .catch(err => {
        console.log('an error occured');
      });
  }
  
// Rest of the component omitted...

}

В этом простом случае мы принесем данные только в том случае, если наш массив данных пуст. Затем мы регистрируем обновленное состояние после запроса или сообщения об ошибке, если Обещание Отклоняется ..

Заключение

Создание Addux Hamnatwares интуитивно понятно. У вас есть доступ к диспетчеру магазина и Гутрите функция. Используйте их для доступа к последнему состоянию вашего приложения или диспетчерских действий.

Вы также должны помнить, чтобы использовать Следующий При необходимости и убедитесь, что не блокировать диспетчерский трубопровод. В нашем случае, если мы не звонили Далее (действие) Любое действие, которое было недействительным для нашего промежуточного программного обеспечения, будет в основном отброшена ⚠️ !!

Некоторые детали реализации были опущены здесь для простоты. Если вы хотите немного глубже, не стесняйтесь исследовать Redux-Slim-async промежуточное программное обеспечение здесь Отказ

Дайте ему ⭐️, если вам это нравится! Я построил это промежуточное программное обеспечение и в настоящее время использую его в производстве, чтобы избежать большого количества котельной. Не стесняйтесь, чтобы попробовать и предоставить обратную связь в любое время. Вот еще один ценный ресурс, чтобы исследовать Adminwares еще больше, Redux Docs !

Вы также можете следовать за мной в Twitter @Supergabry.