Что делает Redux? (и когда вы должны его использовать?)

Пытаетесь осмыслить Redux? Не волнуйтесь, вы не одиноки.

Я слышал от многих, многих людей, что Redux - самый большой барьер для написания приложений React, которые они хотят.

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

Почему?

Лучший вопрос для начала: зачем нам вообще использовать Redux?

И ответ - не «потому что все остальные в Интернете используют это». (Я не сомневаюсь, что именно поэтому многие люди его используют, но давайте углубимся.)

Redux полезен потому, что он решает проблему.

И нет, проблема, которую он решает, - это не «государственное управление». Это очень расплывчато. Черт возьми, React уже выполняет управление состоянием. Redux действительно помогает управлять состоянием, но это не проблема, которую он решает.

Речь идет о потоке данных

Если вы использовали React более нескольких минут, вы, вероятно, знаете о свойствах и одностороннем потоке данных. Данные передаются вниз по дереву компонентов через свойства. Учитывая такой компонент:

count, хранящийся в состоянии App, будет передан как опора:

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

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

Надеюсь, это все обзор. (Если нет, вам следует остановиться здесь, иди изучать React, создать пару небольших приложений и вернуться через несколько дней. Серьезно. Redux не будет иметь смысла, пока вы не поймете, как работает React.).

Слои и слои потока данных

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

Допустим, аватар пользователя хранится как часть данных его профиля, а App компонент верхнего уровня содержит пользователя. Чтобы доставить user данные ко всем 3 Avatar компонентам, user необходимо объединить с набором промежуточных компонентов, которым данные не нужны.

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

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

Разве не было бы хорошо, если бы компоненты, которым не нужны данные, вообще не видели их?

Подключите любые данные к любому компоненту

Это проблема, которую решает Redux. Это дает компонентам прямой доступ к нужным им данным.

Используя функцию connect, которая поставляется с Redux, вы можете подключить любой компонент к хранилищу данных Redux, и компонент может извлекать требуемые данные.

В этом смысл существования Redux.

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

Но вот что здесь: «подключить любые данные к любому компоненту» - это главное событие. Если вам это не нужно, вам, вероятно, не понадобится Redux.

Когда добавлять Redux

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

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

Если ваше приложение будет большим, поддерживающим обширные данные, связанные и не связанные - рассмотрите возможность использования Redux. Но также подумайте о том, чтобы начать без него и добавить его, когда вы столкнетесь с ситуацией, когда это поможет.

Первоначально опубликовано на сайте daveceddia.com 24 октября 2017 г.