Эта статья является частью серии, написанной Мэттью Мэдденом и мной. О нашем последнем сеансе chingu и прогрессе в некоммерческом приложении, которое мы создаем для HipD. Если вы хотите прочитать эту серию, нажмите ниже, чтобы перейти к части №1.
При первом взгляде на приложение, когда я присоединился, меня вернули на минуту назад. Это выглядело точно так же, как мои приложения до того, как я узнал о силе Redux. Если вы не знакомы с приложениями в стиле с отслеживанием состояния, это может быть упущено для вас, но я сделаю все возможное, чтобы помочь всем понять.
React Redux упрощенный…
Приложение React имеет возможность поддерживать состояние и реквизиты. Состояние — это контролируемые данные в приложении, которыми пользователь может манипулировать, например формы, нажатие кнопок и т. д.
Примеры:
Вводя свое имя в форму, вы можете сохранить значение ввода формы в своем состоянии, чтобы использовать его в других местах приложения, вроде переменной приложения.
При нажатии на кнопку меню состояние меню может сохраняться как логическое значение (true/false). Это позволит вашему приложению узнать, хотите ли вы, чтобы меню было открыто или закрыто.
Теперь React может нормально поддерживать это состояние, вы можете передавать состояние от одного компонента к другому. С некоторыми приложениями это можно сделать довольно легко, если вы обрабатываете только несколько частей состояния. Вы передаете состояние кнопки меню родительскому компоненту приложения, чтобы он знал, когда он должен применить меню к экрану, достаточно просто.
Затем у вас есть приложения, которые обрабатывают множество состояний, таких как формы, отображение данных на основе форм, данные из базы данных и т. д. Можно поддерживать состояние такого масштаба, но оно будет выглядеть хорошо…
Это то, что я использую для создания и как это приложение выглядело для меня на первый взгляд. Я помню, как немного дернулся, глядя на это, когда я набирал запрос @mmadden разрешить мне внедрить Redux как можно скорее, прежде чем мы что-то сделаем.
Сила Редукса
Мощь Redux не требует знания контекста веб-сайта или направления, в котором мы будем двигаться, или того, что я буду делать в приложении на следующей неделе. После того, как он реализован, мы можем формировать его так, как нам нужно. Чтобы дать вам наглядную помощь Redux…
Я не буду вдаваться в подробности кода или того, что куда пошло, но буду следить за тем, что я написал. Redux создает «хранилище» (это фактически используемый термин) для всего вашего состояния. Это глобальное хранилище, доступное любому компоненту, который к нему подключается. После подключения к магазину ваше состояние теперь доступно как свойство (свойство) этого приложения. Это позволяет нескольким компонентам иметь доступ к одному и тому же состоянию из одного центрального места. Это позволяет использовать меньше кода в ваших компонентах, уменьшая передачу состояния от одного компонента к другому, затем подтягивая это состояние в качестве опоры для другого компонента, а затем будучи в состоянии… вы поняли идею.
Возможность получить доступ к состоянию хранилища — это только половина возможностей, другая — возможность отправлять действия. Действия — это то, что манипулирует состоянием в магазине Redux. Действия Redux должны быть чистыми функциями, что устраняет случайные боковые ошибки изменяемых данных.
В целом, когда Redux был реализован в этом приложении, код был уменьшен на прибл. 30% по-моему. Рефакторинг кода в соответствии со стандартами es2015 уменьшает код как минимум вдвое. Это позволило нам намного проще работать со всеми данными приложения и знать, что мы получаем правильные данные благодаря чистой функциональности.
Вы можете найти часть 3 этой серии по адресу:
