Мы давно что-то не публиковали. Следовательно, в этом посте мы хотели бы описать последние изменения, внесенные в наш Пример Universal React Apollo.

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

Список последних изменений:

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

Что такое "Восстановить"?

Recompose часто называют служебной программой React или lodash для React. Он публикует API, который облегчает создание функциональных компонентов благодаря использованию компонентов высшего порядка. Список функций в API выглядит многообещающе, и мы очень надеемся, что он будет регулярно пополняться.

Почему мы используем compose?

Ниже вы можете увидеть версию контейнеров Apollo и Redux без перекомпоновки:

Вы можете заметить, что нам пришлось создать дополнительные переменные, такие как LangWithState, LangWithDataAndState, только для того, чтобы передать их позже. Две дополнительные переменные не являются катастрофой, но что, если мы захотим добавить еще 3 компонента более высокого порядка? Затем вы можете представить, что нам нужно будет создать 3 дополнительные переменные, только чтобы передать их другим HOC. Ниже приведен пример рекомпозиции с большим количеством HOC:

Несмотря на использование большого количества компонентов высшего порядка, мы сохраняем код в чистоте. Мы смогли этого добиться благодаря функции compose. Фактически, функция compose предоставляется множеством библиотек, например: react-apolloили react-redux. Мы использовали его версию Recompose, потому что мы также используем его другие функции, такие как withHandlers или branch.

Почему мы используем withHandlers?

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

Проблема с таким подходом заключается в том, что каждый раз, когда наш компонент перерисовывается, новая ячейка памяти будет выделяться для функции onClickHandler. Используя withHandlers, мы можем избежать этого, так как наш компонент будет использовать кешированную версию обработчика.

Почему мы используем branch?

Если вы знакомы с Apollo, вы знаете, что каждый компонент, который извлекает данные из GraphQL API, получит соответствующую опору загрузки, указывающую, что данные еще не готовы к отображению. Раньше в каждый компонент мы добавляли следующую структуру:

Было бы здорово иметь функцию более высокого порядка для автоматического применения состояния загрузки в наших компонентах. Тогда они будут сосредоточены только на том, что они на самом деле делают: на представлении доступных данных. Мы могли бы легко создать такой HOC благодаря функции branch из Recompose:

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

Благодаря функции branch мы можем избавиться от добавления условия загрузки в каждый отдельный компонент. Для этого мы можем просто использовать уже созданную withLoadingComponent функцию высшего порядка. Предлагаем вам ознакомиться с примерами в репо.

Если у вас есть другие интересные идеи о том, как мы могли бы использовать Recompose, не стесняйтесь поделиться ими с нами.

Если вам понравилась эта статья, порекомендуйте ее другим и пометьте наш репозиторий на GitHub.