React & Redux: компоненты, утилиты API и обработчика

Если вы некоторое время использовали React, особенно в большом, сложном приложении, вы, несомненно, столкнетесь с Рукс . Redux – это контейнер состояния, ответственный за поддержание централизованного «состояния» различных ссоров данных в вашем приложении.

Однако, если вы следите за многими учебниками в дикой природе, REDUX часто показывается как используемый непосредственно в компоненте. Хотя это нормально и вполне достоверный способ вызвать действия Редакса и диспетчеров, когда вы смешиваете вызовы с API, вы можете получить действительно длинный и уродливый код. Это становится все труднее поддерживать, труднее для новой членов команды ассимилироваться, и не делает такую хорошую работу по разделению проблем обработки данных.

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

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

Во второй части мы рассмотрим реальную, готовую к производству пример кода, который показывает, как реализовать шаблон обработчика данных и как перенести управление штатом Redux в свои способные руки.

Звучит неплохо? Давай доберемся до этого.

Типичный компонент React, API, Redux Mix

Общая связь между компонентом React, API данных и структурой Redux выглядит следующим образом:

Диаграмма иллюстрирует поток от пользователя, взаимодействующего с компонентом, до обновления состояния. Пример этого может сделать что -то в этом направлении:

Пользователь нажимает кнопку, чтобы загрузить список пользователей
Компонент React вызывает API, используя запрос GET на что -то вроде «/пользователей»
API получает данные и возвращает свое обещание компоненту
Затем компонент направляет действие Redux с полезной нагрузкой API (например, список пользователей)
Redux Updates Catate App со списком пользователей это было передано
Изменение состояния замечено компонентом, который предпринимает действия для обновления, обновляя себя с блестящим списком пользователей.

React, API и Redux на практике

Теория – это хорошо и хорошо, но давайте посмотрим на реальный пример. Если вы хотите сразу же просмотреть код, то вы можете Посетите песочницу кода, которую я настроил Для этого примера и посмотрите.

( боковая панель : Теперь я предполагаю, что вы, по крайней мере, немного знакомы с Redux; если не на практике, то, надеюсь, в теории. Это может быть довольно сложной концепцией, чтобы обернуть голову вокруг, и я, конечно, боролся в первые дни использования, но придерживайтесь ее, так как это делает вашу жизнь очень легкой, как только строительные блоки на месте. Для этого примера я подключил все необходимые редукторы, создатели действий и состояние, следуя Действительно четкие руководства и документация, найденные на сайте React-Redux сам.)

Перво -на первый взгляд: Создание компонента приложения скелета

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

Немного как это:

Для этого, во -первых, мы изложили строительные блоки компонента приложения.

import React from "react";

import "./styles.css";

class App extends React.Component {
  handleLoadUsersClick = () => {
    // TODO - we'll handle loading the users from the 
    // API here and some Redux state management.
  };

  render() {
    return (
      
        React, Redux, and Data Handling
        An example 
        
          Click the load users button below to start loading users from the api
        
        
          
        
        
        Users
        {this.props.loading ? loading... : null}
        {!this.props.loading && this.props.users ? (
          
            {this.props.users.map(user => (
             
               {user.name} | {user.email}
              
            ))}
          
        ) : null}
      
    );
  }
}

Здесь нет ничего особенного. У нас есть несколько простых HTML с простой кнопкой, подключенной к внутреннему обработчику события Click handleloadusersclick () Анкет При этом у нас есть некоторые значения реквизита, чтобы показать загрузочное сообщение и отобразить список пользователей, как только мы загрузили их, и они доступны.

Теперь добавить в операции Redux

Конечно, нам нужно заполнить эти значения реквизита из нашего состояния приложения. Реквизит, загрузка и Пользователи будет поставлен из центрального штата Redux. Тем не менее, нам нужно получить их, используя Connect () Функция, которая поставляет Redux Анкет

Нам также нужно добавить наши действия Redux и подключить их к компоненту нашего приложения.

Чтобы достичь этих целей, нам нужно создать два объекта (или функции, которые возвращают объекты), которые будут отображать наше центральное состояние с нашим реквизитом, так и сервис диспетчеры Map Redux в наши реквизиты соответственно.

Давайте добавим Connect () функционируйте с нашим компонентом приложения и двумя функциями, которые подключают состояние и отправляют.

// ...other imports

import { connect } from "react-redux";
import { getUsers, getUsersSuccess } from "./actions";

class App extends React.Component {
    // ...App implementation
}

const mapStateToProps = state => ({
  users: state.users,
  loading: state.isLoading
});

const mapDispatchToProps = dispatch => {
  return {
    onLoadUsersClick: () => {
      dispatch(getUsers());
    },
    onLoadUsersComplete: users => {
      dispatch(getUsersSuccess(users));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Основной раздел импорта и реализация приложений остаются прежними, но мы просто добавляем в наш новый импорт

import { connect } from "react-redux";
import { getUsers, getUsersSuccess } from "./actions";

Загружать в подключить Функция от React Redux и захватить наши действия редуктора из другого файла – это getUsers и getUsersSuccess Названный импорт выше.

Теперь мы будем подключить элементы состояния нашего приложения в реквизит компонента приложения:

const mapStateToProps = state => ({
  users: state.users,
  loading: state.isLoading
});

Это очень типичная настройка, в которой мы создаем функцию, которая возвращает объект, свойства которых карту в ряде реквизитов, которые может использовать наш компонент. В нашем случае мы используем this.props.users Чтобы создать наш неупорядоченный список пользователей.

Далее мы создаем функцию, аналогичную функции диспетчерской карты Redux, с объектом Component’s Reps:

const mapDispatchToProps = dispatch => {
  return {
    onLoadUsersClick: () => {
      dispatch(getUsers());
    },
    onLoadUsersComplete: users => {
      dispatch(getUsersSuccess(users));
    }
  };
};

С помощью этой функции мы принимаем метод рассылки Redux (который будет действовать в соответствии с нашими действиями), и мы строим и возвращаем объект, который также будет передаваться в реквизит нашего компонента приложения. В этом случае мы возвращаем кучу функций, которые наше приложение может вызвать, чтобы отправить действия Redux и, в конечном счете, обновить наше состояние.

Наконец, мы проводим реквизиты состояния, отправляем реквизиты и компонент нашего приложения, используя функцию Redux Connect в этом бите кода:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Проводка обработчика кнопок и наш вызов API

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

В настоящее время, хотя и подключен к Onclick Событие нашей кнопки, метод обработчика выглядит немного грустным и пустым:

handleLoadUsersClick = () => {
  // TODO - we'll handle loading the users from the 
  // API here and some Redux state management.
};

Итак, давайте заполним это некоторыми из наших действий Redux и нашего API -звонка:

handleLoadUsersClick = () => {
  this.props.onLoadUsersClick();

  fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(json => this.props.onLoadUsersComplete(json));
};

Первое, что нам нужно сделать, это позвонить нашему методу рассылки Redux OnLoadUsersClick () Анкет Если вы следите за Код Песочница Пример кода Через вы увидите, что это устанавливает флаг «Isloading» на «true». Мы передаваем этот предмет состояния в реквизит нашего компонента приложения, и он используется для демонстрации и скрытия части пользовательского интерфейса, таких как небольшое сообщение «Загрузка …».

Далее мы называем наш API. В этом случае я использую удобный бесплатный инструмент под названием JSonPlaceholder Анкет Он имеет кучу конечных точек, которые возвращают фиктивные данные, но это фактически живой API в дикой природе. В нашем случае мы называем ‘ https://jsonplaceholder.typicode.com/users ' Конечная точка, которая вернет хороший набор пользовательских данных – имя, электронная почта, адрес, подобные вещи.

Использование нативного JavaScript fetch () Метод для этого, мы называем API, форматируйте ответ в некоторые JSON, прежде чем, наконец, передавать эти данные в нашу другую функцию Redux Dispatch, которую мы настроили ранее, OnLoctureUserscomplete () Анкет Действие, которое он вызывает обновлениями, утверждает, установив наш список пользователей и переключив флаг «Isloading» на «false».

Полный пример

Вот полный, встроенный пример всего кода выше во всем, что он работает.

Почему приведенный выше пример плохой?

Это не…

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

Однако (всегда есть «однако») …

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

С помощью fetch () Непосредственно в наших компонентах нам придется повторить много кода для таких вещей, как форматирование ответа в подходящую форму.
Хотя компоненту, возможно, придется запустить вызов API, он, как правило, не должен быть настолько тесно связан с API, что он встроен в себя. С точки зрения компонента, было бы лучше просто попросить некоторые данные и получить их, не заботясь о том, где эти данные получаются.
Кроме того, мы не обрабатываем какую -либо ошибку API здесь. Если мы это сделаем, код начнет расти, и он поднимает вопрос о том, добавляем ли мы обработку ошибок API к каждому компоненту или абстрагировать его в более централизованное место.
У нас есть несколько вызовов Redux Ection/Dispatch, чтобы обрабатывать общий шаблон действий Redux «Действия», «действие завершено» и «что -то пошло не так во время действия». Возьмите handleloadusersclick () мероприятие. Здесь мы начинаем с вызова, чтобы установить флаг загрузки, а затем отправлять еще один, как только данные вернутся.
Если нам нужно каким -либо образом манипулировать данными, прежде чем переходить в наши события отправки (иногда данные, полученные от API, не в точной форме, которая нам нужна), то это добавит больше кода в наш небольшой компонент.
Список функций отправки в конце нашего файла компонентов сейчас всего лишь мал, всего два. Это легко увидеть, хотя, как это может стать довольно громоздким с течением времени, так как нам нужно добавить больше функций.
Сложность тестирующих компонентов, построенных таким образом, увеличивается.

Полезные ссылки

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

Redux JS – Redux Framework, созданная для JavaScript
React Redux – Тот же самая каркас Redux, с акцентом на реагирование
Json Заполнитель – Супер полезный онлайн -API, который возвращает некоторые общие фальшивые данные

Прибытие в части II

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

Оригинал: “https://dev.to/kendalmintcode/react-redux-components-api-s-and-handler-utilities-3fk9”

Типичный компонент React, API, Redux Mix

React, API и Redux на практике

Перво -на первый взгляд: Создание компонента приложения скелета

React, Redux, and Data Handling

An example

Users