Новый Context API, представленный в React 16.3, произвел настоящий фурор в сообществе React. Некоторые не в восторге, некоторые заявляют о скорой смерти Redux. Тем не менее, я предпочитаю сосредоточиться на полезных приложениях нового паттерна.

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

Проблема

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

// Data is falsy, show Loading.
// Data is an empty array show <NoData />.
// Data is array of actual items, show <List />.
function IRecieveData ({data}) {
  return (
    <Section>
      {!data && <Loading />}
      {(data && data.length === 0) && <NoData />}
      {(data && data.length >= 1) && <List data={data} />}
    </Section>
  )
}

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

Решение

function IRecieveData ({data}) {
  return (
    <Section>
      <Switch data={data}>
        <Switch.Loading render={Loading} />
        <Switch.NoData render={NoData} />
        <Switch.Data render={List} />
      </Switch>
    </Section>
  )
}

По сути, мы взяли наши базовые управляющие структуры Javascript, обернули их JSX; и использовал Context API, чтобы избежать передачи данных каждому компоненту через props. Что мы получили?

  1. Последовательность при повторном использовании. При использовании этого шаблона в новом представлении достаточно просто убедиться, что data отображается правильно.
  2. Это все JSX. JSX читается, и разработчики React привыкли его читать. Это с первого взгляда добавляет ясности нашему коду, без необходимости понимать базовую форму данных.

И Т. Д.

Реализацию этого шаблона можно найти на Github по адресу https://github.com/bfillmer/loading-view-logic.

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