Угловые услуги в реале

Я иду из Углового, пытаясь узнать Реакт (Родной). Как мы реализуем концепцию Angular в «Реагировании»?

Например, я хотел бы сделать следующее:

  1. Получить данные из внешнего API как json
  2. Сделайте что-нибудь для данных, например, измените каждый элемент
  3. Сделайте измененные данные доступными для нескольких компонентов приложения

Это чрезвычайно просто и удобно в Угловом, используя Сервис, и вставляя эту Службу в любые Компоненты, которым необходим доступ к данным.

Как это достигается в Реагировании?

Всего 1 ответ


Прямым аналогом услуги в ванильном реактиве является компонент. В отличие от угловых, компоненты React не должны существовать в DOM. Подобно службам и компонентам / директивам в Angular, разделение проблем в Реактировании может быть обеспечено контейнерными и презентационными компонентами . Контейнерный компонент может обрабатывать бизнес-логику, а логика представления - презентационная составляющая.

Поскольку React поддерживает функциональный подход, повторно используемый код не обязательно относится к классу и вместо него может быть выражен функциональной композицией.

Образцы зависимостей снабжены иерархией компонентов в React. Он может быть реализован несколькими распространенными способами для предоставления данных (например, экземпляра службы) для всего приложения или его части, например, через глубоко переданные реквизиты, контекстный API, стороннее управление государством (Redux, MobX).

const fetchData = () => fetch(...).then(res => res.json());
const processData = data => ...;
const fetchProcessedData = () => fetchData().then(processData);

class ContainerComponent extends React.Component {
  state = {};

  componentDidMount() {
    fetchProcessedData().then(data => {
      this.setState({ data });
    });
  }

  render() {
    return {this.state.data && <PresentationalComponent data={data}/>};
  }
}

PresentationalComponent Компонент вводится зависимость через data prop.

Тот же пример можно реализовать с помощью угловых компонентов, но это приведет к нежелательным элементам DOM.

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