React — это потрясающая библиотека Javascript, которая может сделать ваше веб-приложение гладким, эффективным и динамичным. Это позволяет современным приложениям и веб-сайтам одновременно отображать разные компоненты, каждый из которых имеет свой собственный информационный поток, работающий независимо друг от друга. С точки зрения разработчика, React отображает эти разные компоненты, и каждый из этих компонентов может быть связан с своего рода управлением состоянием. Важно, чтобы компоненты React могли каким-то образом изменять состояние, потому что именно так запускается повторный рендеринг, что делает приложения динамичными и отзывчивыми.
Однако проблема, с которой вы можете столкнуться, заключается в том, что ваше приложение увеличивается в размере и усложняется. Для больших приложений требуется больше компонентов и больший поток данных. Может быть сложно отслеживать, где должны храниться состояния и какой дочерний компонент какое состояние изменяет. Вот где Redux вступает в игру!
Я буду использовать Командный центр Westworld школы Flatiron School в качестве примера Redux, избавляющего вас от головной боли, связанной с управлением состоянием и отработкой реквизита.
Щелчок по любому из персонажей отобразит компонент «Информация о хосте» для этого персонажа в правом нижнем углу. Здесь я нажал на Musashi, что дало мне информацию о нем, такую как статус его активности и текущее местоположение. Это кажется пользователю достаточно простым, не так ли? Вы нажимаете на любую карточку персонажа, и там отображаются их данные.
Это дерево компонентов веб-приложения Westworld. App — это место, где хранится состояние нашего компонента Host Info. Из приложения функция обратного вызова для обработки обновления состояния информации о хосте передается в качестве реквизита 4 дочерним компонентам (сверление реквизита AKA). В конце концов, щелчок по компоненту Host вызовет функцию обратного вызова, и состояние информации о хосте будет обновлено, что вызовет повторную визуализацию компонента Host Info и последующих родительских компонентов. Это похоже на повторяющийся код, не так ли? И это только для одного клика из всего приложения! Вместо того, чтобы копировать и вставлять одну и ту же функцию обратного вызова в каждый компонент, вы можете использовать Redux для поддержки единого источника для вашего состояния. Затем любой компонент в вашем приложении может «прицепиться» к состоянию без необходимости сверления реквизита.
Здесь Index (компонент самого высокого уровня) импортирует Store, в котором хранятся все значения состояния приложения. Используя компонент Provider из Redux для обертывания нашего компонента App, мы предоставляем каждому дочернему компоненту доступ к хранилищу с помощью хука useSelector. В нашем примере Westworld это означает, что компонент Host может напрямую обращаться к состоянию и вызывать любую логику для прямого изменения состояния.
Redux — это мощная библиотека React, которая НЕ всегда необходима для вашего приложения. В своей документации команда разработчиков даже упоминает, что использовать его можно только в том случае, если это имеет смысл для вашего проекта или приложения. Для новичков в React (таких как я) документация и учебник Redux могут показаться немного скучными, но в конечном итоге они того стоят и избавят вас от необходимости писать повторяющийся код до тех пор, пока вы не начнете терять рассудок.
