Что такое менеджеры состояний

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

Например, если покупатель добавит новые товары, удалит старые или изменит их количество в корзине онлайн-магазина, произойдет перерасчет итоговой стоимости покупок.

Без state managers работа с кодом на сложных проектах с большими объемами динамических данных будет сложнее и займет много времени.

На данный момент самые используемые менеджеры состояний — Redux, MobX и&nbsp; Zustand.

В рамках нашего <a href="https://result.school/products/state-managers?utm_source=media&amp;utm_medium=article&amp;utm_campaign=state_managers&amp;utm_content=17_10_23&amp;utm_term=state_managers">курса по менеджерам состояний</a> мы учимся работать с Redux и MobX, потому что эти два менеджера зарекомендовали себя за время существования.&nbsp;

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

Про Zustand и другие менеджеры мы расскажем в отдельной статье.

Начнем обзор инструментов для работы с состоянием в JavaScript-приложениях с наиболее используемой библиотеки.&nbsp;

Redux основан на трёх основных принципах:

В зависимости от того, каким менеджером пакетов вы пользуетесь, введите команду <code class="inline-code">"npm install redux"</code> или <code class="inline-code">"yarn add redux"</code>.&nbsp;

Вероятнее всего вы храните исходники в&nbsp; папке src. В ней заведите отдельную папку под Redux и создайте базовую структуру для хранилища.

Подробнее про установку мы расскажем в отдельной статье.

Рассмотрим, как управляет состояниями Redux на примере изменения данных в стандартном счётчике на сайте.

Сначала создадим действия для увеличения и уменьшения значения счётчика:

Затем создадим редьюсер, который будет обрабатывать эти действия:

Создадим хранилище и передадим наш&nbsp; редьюсер:

Теперь подпишемся на изменения состояния и обновим интерфейс приложения:

Осталось только отправить действия для изменения состояния:

Дополнительные инструменты для работы с состоянием

На основе Redux созданы технологии, которые облегчают управление state в React-приложениях — библиотека&nbsp;React-Redux и пакет решений Redux Toolkit.

React-Redux. Эта библиотека предоставляет простой и эффективный способ связать состояние Redux с компонентами React.

Например, вы можете использовать функцию <code class="inline-code">connect</code> для связи вашего компонента с хранилищем Redux.&nbsp; Она принимает две функции: <code class="inline-code">mapStateToProps</code> и <code class="inline-code">mapDispatchToProps</code>, которые определяют, какие части состояния и какие функции отправки действий будут доступны компоненту в виде пропcов.

Рассмотрим на примере:

Экспортируйте обернутый компонент, который получает доступ к состоянию и функциям отправки действий:

Теперь ваш компонент <code class="inline-code">Counter</code> имеет доступ к состоянию и функциям отправки действий из Redux хранилища через пропсы.

Redux Toolkit. Для чего он нужен и что это такое? Это официальная библиотека для React. С ее помощью можно упростить создание хранилища Redux. Для этого используем&nbsp; функцию <code class="inline-code">configureStore</code>. Она автоматически настраивает миддлвэры, включая Redux Thunk, и включает инструменты разработчика Redux DevTools.

React-Redux и Redux Toolkit написаны на TypeScript, то есть типизация уже встроена. Это дополнительно облегчает работу над сервисом.

Например, Redux Toolkit включает удобную функцию для работы с асинхронными действиями, такими как запросы к API. Функция <code class="inline-code">createAsyncThunk</code> принимает строку типа действия и функцию, которая возвращает промис.&nbsp;

Это позволяет&nbsp;автоматически создавать действия&nbsp;для начала, завершения и ошибок запроса.

Это библиотека для управления state, которая позволяет создавать реактивные модели данных. Она основана на наблюдении за изменениями и автоматически обновляет все зависимые от них компоненты. В отличие от Redux, который предлагает строгий и декларативный подход к управлению state, MobX обладает более гибким и менее формальным синтаксисом.

Менеджеры Redux и MobX предлагают разные подходы к управлению состоянием в веб-приложениях.

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

Важно учитывать особенности проекта, уровень сложности и требования к управлению state.&nbsp;

При выборе между Redux и MobX следует опираться на такие факторы:

Примеры кода со state managers и без них

Давайте рассмотрим, как менеджеры состояний упрощают разработку за счет более удобных решений.

Отлаживать и тестировать код проще

Рассмотрим на примере компонента, который содержит счетчик и две кнопки для его увеличения и уменьшения.

Пример кода при помощи хука useState

Мы используем <code class="inline-code">useState</code>, чтобы создать&nbsp; локальное состояние <code class="inline-code">count</code>, которое обновляется с помощью функций <code class="inline-code">handleIncrement</code> и <code class="inline-code">handleDecrement</code>.

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

Пример кода с использованием Redux

Для чего нам в этом случае нужен Redux? Рассмотрим тот же код, но с использованием state manager.

Создаем глобальное состояние <code class="inline-code">`count`</code>, которое обрабатывается функциями <code class="inline-code">`increment` </code>и <code class="inline-code">`decrement`</code>, определенными в файле <code class="inline-code">`actions.js`</code>. Используем <code class="inline-code">`useSelector`</code> для получения значения <code class="inline-code">`count`</code> из глобального состояния и <code class="inline-code">`useDispatch`</code> для вызова функций <code class="inline-code">`increment`</code> и <code class="inline-code">`decrement`</code>.

Таким образом, мы можем легко отслеживать и тестировать state в едином месте, что упрощает разработку приложения и обнаружение ошибок.

Проще работать с большим объемом данных

С помощью state managers мы можем уменьшить нагрузку на сайт и сделать его более быстрым и отзывчивым для пользователей.

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

Давайте посмотрим, как будет выглядеть код, если использовать Redux:

Создаем экшены и редукторы для получения и обработки данных, а затем используем хук <code class="inline-code">useSelector</code> для получения необходимых данных из глобального состояния.

При обновлении state компонента, React будет перерисовывать только необходимые элементы на странице, что позволяет увеличить производительность приложения.

Поможет пройти на позицию middle

State managers &nbsp;— &nbsp;это один инструментов, который поможет программисту улучшить навыки и стать более востребованным на рынке труда.

Работодатели хотят, чтобы мидлы могли создавать приложения, которые удобны в использовании для клиентов и просты в управлении для разработчиков.

Поэтому в вакансиях на позицию middle-разработчика часто можно увидеть требование уметь работать в Redux и MobX.

Курс <a href="https://result.school/products/state-managers?utm_source=media&amp;utm_medium=article&amp;utm_campaign=state_managers&amp;utm_content=17_10_23&amp;utm_term=state_managers">Redux, Redux Toolkit и MobX</a> мы полностью посвятили state managers. В нем мы учим работать с глобальным состоянием с помощью Redux и аналогов: знакомим с теорией, рассматриваем кейсы и даем практические задания.

Курс рассчитан на 2 недели. Подойдет junior+, которые хотят прокачаться до middle+. Начать обучение вы можете бесплатно с вводного модуля.

 Умение управлять объемными массивами данных в сложных проектах не уникальный, но необходимый разработчику навык. Рассказываем, что такое менеджеры состояний и как Redux, MobX и другие инструменты помогают работать с состоянием компонентов в JavaScript-приложениях.

 Узнайте, что такое менеджеры состояний и изучите основные принципы Redux и MobX для управления состоянием в JavaScript-приложениях.

Что такое менеджеры состояний и зачем разработчику их использовать

Менеджеры состояний: что это такое и как использовать Redux и MobX

JavaScript входит в топ-3 языков программирования по популярности. На нем создают интерактивные элементы сайтов и&nbsp;пишут мобильные приложения.

Даже программы, на которых работает бытовая техника и коммерческое оборудование, написаны на JavaScript: благодаря ему работают платежные терминалы, ТВ-приставки и умные пылесосы.

Освоить JavaScript можно быстро и без опыта, но как это сделать? Следуйте нашему алгоритму.

Перед тем, как приступать к JavaScript, нужно освоить HTML и CSS — языки&nbsp;разметки и&nbsp;стилей веб-страниц. Они нужны для построения каркаса и настройки внешнего вида сайта.

Далее разберемся, зачем этот язык программирования нужен и где используется.&nbsp;JavaScript&nbsp;отвечает за динамическое отображение контента на веб-странице, он «оживляет» то, что оформлено инструментами HTML&amp;CSS. Все, что движется или мигает, написано на JS. С его помощью разработчики анимируют 2D/3D графику, создают интерактивные карты, кликабельные кнопки, галереи, формы авторизации.

JS используется как во frontend для создания пользовательских интерфейсов, так и в backend, чтобы написать&nbsp;серверную часть приложений.

У любого языка, будь он естественным или искусственным, есть базовые элементы:

По этим&nbsp;правилам&nbsp;работает любой язык, в том числе и JavaScript. Иногда написание кода сравнивают с сочинением сценария фильма: сначала автор выстраивает логику событий и пишет «скелет», складывает слова в предложения, а потом подбирает образы, метафоры, юмор.

С кодом всё точно также: сначала база, потом сложные надстройки.

Рекомендуем осваивать JS в такой последовательности:

Перейти на ступень выше

Разобрались с основами, пощупали JS — пора двигаться дальше. Изменяем веб-страницу, разбираемся в её глобальном устройстве.

В этом разделе рекомендуем изучать темы в такой последовательности:

Также рекомендуем ознакомиться с Node.js. Благодаря ему мы можем запускать JavaScript не только в браузере, но и, например, на сервере.

Изучить полезные инструменты

Теперь переходим к изучению более продвинутых технологий. Когда вы хотите покататься на самокате, вы не изобретаете его с нуля от чертежа до сборки. Вы берете готовый. Аналогично поступайте с кодом. Используйте библиотеки, плагины и фреймворки для того, чтобы не писать код, который уже за вас написали.

Советуем разобраться в следующих технологиях:

Практиковаться после каждой новой темы

Нельзя стать программистом, изучив только теорию. Без практики вы профессию не освоите. Как только изучили новую тему — сразу закрепляйте. Если смотрите видеоурок, то ставьте лектора на паузу и пробуйте написать код самостоятельно.

Любите творчество — придумайте сами себе задачу и решайте. Например, доработайте чужой скрипт. Создайте свой сайт и добавляйте на него разные функции — соберётся основа для портфолио. Или загляните в учебники, ответьте на простые вопросы.

Литература поможет глубже понять теорию. Любые видеоуроки — это сочетание теоретических блоков и практического опыта лектора. Он объясняет и показывает технологии так, как понимает и применяет сам. В этом случае есть смысл изучить первоисточник и разобраться с «оригинальным» материалом.

Рекомендуем начать с книг:

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

Понимаете, что после первых трудностей опустились руки, и вы быстро выгорели? Тогда записывайтесь на курс. Одногруппники и кураторы помогут не выпасть из ритма учёбы и точно понять, зачем вам учить JavaScript.

👉 Обратите внимание на курс «<a href="https://result.school/study-developer-start?utm_source=media&amp;utm_medium=article&amp;utm_campaign=how_to_learn_javascript&amp;utm_content=01_08_23&amp;utm_term=jmfd_start">С нуля до middle-разработчика</a>». На блоке Джуниор вы разберётесь в JavaScript, освоите необходимые работы базовые концепции, научитесь писать frontend на фреймворке и связывать его с backend, а также изучите TypeScript.&nbsp;

Язык JavaScript востребован не только среди разработчиков интерфейсов, сфера его использования достаточно широка. Новичок может освоить его за несколько месяцев. Рекомендуем придерживаться алгоритма:

💡 Разобраться с HTML и CSS, освоить азы JS

💡 Изучать библиотеки и фреймворки

💡 Читать профессиональную литературу

В любом языке, даже если он предназначен для компьютеров и оборудования, есть своя структура, лексика, правила. Рассказываем, с чего начать изучение JavaScript, чтобы новый навык приносил пользу.

Узнайте, с чего начать и как достичь результатов в изучении JavaScript. Основы языка, инструменты, практика и полезные темы - все в одной статье.
