Знакомимся с Redux на понятном языке. Минимальные требования для изучения − знание React. В этом материале разбираем принципы библиотеки.
Это руководство для новичков в мире Redux. Хотя, если вы просто хотите структурировать понимание фундаментальных концепций Redux, этот материал тоже будет полезен. В этой статье рассказываем, что такое Redux, и зачем его изучать. Если вы уже знаете основы и хотите что-нибудь потяжелее, можете присмотреть для себя книги по Redux.
Введение
Эта статья была написана, потому что найти хорошие материалы по данной библиотеке невероятно трудно. Видеоуроки, статьи и книги часто слишком усложнены. Тогда и появилось желание написать простой путеводитель для начинающих.
Также проверка показала, что даже сертифицированный курс разработки React (который стоил в США больше 300 долларов) не помогает новичкам разобраться в полной мере.
Ну что, знакомимся с Redux на понятном языке?
Подход к обучению
Если вы когда-нибудь пробовали вникать в тему, то знаете, что Redux − ничто, по сравнению со связанными библиотеками, которые тоже следует знать: React-Redux, Redux-thunk, Redux-сага, Redux-обещание, Reselect, Recompose и куча других. У каждой из них свои особенности. Но в нашей статье представлен только базис, который позволит разобраться дальше самим. Не нужно сразу грузить себя сложными вещами.
Противопоказания
Единственное, что вы уже должны знать к началу изучения темы − React. Если таких знаний пока нет, то хотя бы прочтите Pure React.
Знакомимся с Redux
Несколько лет назад разработка интерфейсных приложений казалась чем-то несерьёзным. Теперь от таких приложений требуют большего, поэтому сложность разработки возросла. Это сравнимо с ситуацией, когда кот больше не помещается в обычную коробку, и теперь нужно сделать для него новое место жительства, а это требует больше усилий. Хотя все процессы так устроены: чем дальше и больше, тем сложнее.
Что такое Redux
Согласно документации, Redux − это предсказуемый контейнер состояния для JavaScript-приложений. Да, это звучит странно и непонятно. На самом деле суть Redux в том, чтобы приручить того самого кота из коробки, а точнее сделать так, чтобы приложения работали последовательно. Кроме этого, у него есть много других преимуществ, но об этом позже.
Зачем использовать Redux
Да, обычно сложно убедить кого-то использовать инструмент A вместо инструмента B, если они похожи. Каждый выбирает то, что ему больше нравится. Так и с Redux: разработчики и без него чувствуют себя нормально, на ранних этапах это точно не стоит траты времени.
Но когда приложение становится нагруженным, тогда стоит внедрить Redux в целях повышения производительности. А ещё Redux любят за то, что можно быстро изучить основы и выйти на рынок труда. Или за то, что здесь есть функции logging, hot reloading, time travel, universal apps, record и replay. Изучите, как они работают с помощью лекции.
Плюс статистика: 60% React-приложений используют Redux. В этом материале собрано ещё больше аргументов в пользу изучения Redux. Да и в конце концов, когда знания были лишними?
Как это работает в глазах пятилетнего ребёнка или разбираем принципы
Так как мы только знакомимся с Redux, ситуативные примеры тоже полезны. Допустим, вы идёте в банк снимать деньги. У вас есть единственная цель − снять деньги, а не что-то ещё. Вот она − WITHDRAW_MONEY.
Приходя в банк, человек направляется к кассиру (банкоматы не работают), чтобы сообщить о своём намерении снять деньги. Так, стоп. А почему нужно идти к кассиру, если деньги лежат в хранилище в соседней комнате? Почему нельзя просто забрать их оттуда?
Но в жизни, как и в Redux, это работает по-другому. Комната, где хранятся деньги, − это Redux Store, а state − часть денег в хранилище, которая принадлежит вам. Ваши Redux-приложения тоже хранятся в общем Redux Store. И это первый принцип Redux.
Состояние всего вашего приложения сохранено в дереве объектов внутри одного хранилища
Идя в банк, вы думаете о том, чтобы произвести какое-то действие − action. Если вы собираетесь снять деньги, то action − снятие денег. То же самое применимо к Redux. Напишите сколько угодно кода, но если вы захотите обновить состояние своего приложения Redux (как setState в React), вам нужно сообщить Redux об этом с помощью action.
Redux как гарант того, что с вашим счётом ничего незаконного не случится, потому что он постоянно проверяет состояние банковского счёта. Это второй принцип Redux.
Единственный способ изменить состояние − это применить действие − объект, который описывает, что случится
Кассир для банка − как reducer для Redux. В истории выше нужно было обязательно встретиться с кассиром, который имеет доступ к деньгам. То же самое с Redux: вам обязательно нужно сообщить, что вы хотите сделать. Если вы хотите обновить состояние вашего приложения, вы передадите ваш action в reducer. Вообще, это называется диспетчеризация.
reducer знает, что ему нужно делать. В этом примере он предпримет действие WITHDRAW_MONEY и обеспечит получение денег. В условиях Redux деньги, которые вы тратите, находятся в state. Когда reducer узнает что нужно что-то сделать, он вернёт вас в позицию new state.
Для определения того, как дерево состояния будет трансформировано действиями, вы пишете чистые редюсеры
Отлично, теперь вы знаете основы Redux и то, как работают store, reducer и action.
Смотрите также нашу статью о первом приложении на Redux.
Комментарии