Новый 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
. Что мы получили?
- Последовательность при повторном использовании. При использовании этого шаблона в новом представлении достаточно просто убедиться, что
data
отображается правильно. - Это все JSX. JSX читается, и разработчики React привыкли его читать. Это с первого взгляда добавляет ясности нашему коду, без необходимости понимать базовую форму данных.
И Т. Д.
Реализацию этого шаблона можно найти на Github по адресу https://github.com/bfillmer/loading-view-logic.
Как и в случае с большинством шаблонов в экосистеме React, это не подходит для каждого варианта использования, не существует универсального шаблона для обработки этого типа повторяющегося шаблона.