State менеджеры что это

Насколько вообще нужны менеджеры состояний?

Я был на собеседовании в уездную галеру N, меня спросили про менеджер состояний Redux. Зачем он нужен, и тд и тп.

Я ответил что не использую менеджеры состояний, а юзаю чистый React. По скольку я до этого встречался и с другими менеджерами состояний. У меня возник вопрос.

А зачем они вообще нужны JS фреемворкам?

Где я должен 100% использовать менеджер состояний иначе фронт загнется?

P.S. Примечания автора

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

Я пишу под React, использовал Vue, и так же Angular. Я сталкивался с менеджерами состояний, и всерьез не понимаю области их применимости.

• Вопрос задан более трёх лет назад
• 6183 просмотра

Комментировать
Решения вопроса 3
frontend-разработчик

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

Большие приложения нельзя писать без стейт-менеджера — это выльется в огромную неподдерживаемую кучу спагетти.

Ответ написан более трёх лет назад
Нравится 8 2 комментария

IDONTSUDO @IDONTSUDO Автор вопроса

Ну как по мне, любое большое приложение это большая тарелка спагетти. И тут вопрос только в том, из какой миски кушать.

IDONTSUDO, правильно спроектированное приложение не превращается в спагетти. Вопрос только в том, сколько лет жизни нужно вложить в развитие, прежде чем получится спроектировать правильно.

Stack Overflow answer searching expert

Redux используется как «глобальная переменная», в которую можно положить и взять из любой точки приложения.

Вот в этой статейке более подробно расписано.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Кратко о себе: Я есть

Нигде вы не должны использовать 100% менеджер состояний. У него на мой взгляд два назначения:

1) Отделить данные от компонентов, чтобы не прокидывать данные через(или в) 10 дочерних компонентов
2) Унифицировать доступ и запись к данным, это удобно. Все данные и структура их хранения в одном месте, запись происходит одними и теми же экшинами, а не как Год на душу положит. И получение данных из одного источника с одним именем, а не как взбредет в голову создателю нового компонента.

Такая форма стала дефакто основной в вэб-разработке. Кому-то она нравится, кому-то нет, но необходимости в конкретном проекте использовать менеджер, а тем более конкретный менеджер, нет и не будет.

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 1

Упираешься в сложность поддерживать код. На маленьких проектах с простой логикой пойдет и просто чистый реакт. С ростом проекта и тем более если проект делают несколько программистов, то поддерживать код становиться сложно. Особенно в react, где код вместе с версткой читать такой код сложно. Второй момент это разделение логики и представления. В своих проектах я использую redoor.
Просто подключить:

const ButtonPlus = Connect( ()=>cxRun('a_click')>>plus )

А акшенсы просто лежат отдельно в фале в виде:

export const a_click = ()=>(< cnt:(state.cnt + 1) >)

Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript

Как сделать append блока в правильном месте?

• 1 подписчик
• 28 минут назад
• 31 просмотр

• Веб-разработка
• +2 ещё

Что тут задача фронтенда, а что бэкэнда?

• 1 подписчик
• 3 часа назад
• 105 просмотров

Управление состоянием приложения

Сложность больших приложений нередко возрастает из-за распределения кусочков состояния по многим компонентам и связям между ними. Для решения этой проблемы, Vue предлагает Vuex: нашу собственную библиотеку управления состоянием, вдохновлённую языком Elm. Она даже интегрируется с Vue-devtools, из коробки давая доступ к функциональности “машины времени”.

Информация для React-разработчиков

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

Простой контейнер состояния с нуля

Часто упускается из виду тот факт, что «источником истины» во Vue-приложениях является исходный объект data — экземпляры Vue всего лишь проксируют доступ к нему. Поэтому состояние, которым должны совместно владеть несколько экземпляров, можно просто передать по ссылке:

var sourceOfTruth = {};

var vmA = new Vue({ 
data: sourceOfTruth
});

var vmB = new Vue({ 
data: sourceOfTruth
});

Теперь при любых изменениях sourceOfTruth обновится и vmA , и vmB . Подкомпоненты этих экземпляров также имеют доступ — используя this.$root.$data . Эффект «единого источника истины» достигнут, но отладка превратится в сущее мучение: любая часть данных может быть изменена любой частью приложения в любой момент и без каких-либо следов.

Для решения этой проблемы, мы можем использовать простое хранилище:

var store = { 
debug: true, 
state: { 
message: "Привет!" 
}, 
setMessageAction(newValue) { 
if (this.debug) console.log("setMessageAction вызвано с ", newValue); 
this.state.message = newValue; 
}, 
clearMessageAction( ) { 
if (this.debug) console.log("clearMessageAction вызвано"); 
this.state.message = ""; 
}
};

Обратите внимание, что все действия, изменяющие состояние хранилища, сами помещены в него. Такой подход к глобальному управлению состоянием приложения облегчает понимание возможных изменений и источников их появления. Кроме того, если что-то пойдёт не так — у нас будет лог, по которому можно отследить последовательность действий, приводящую к возникновению бага.

Каждый экземпляр/компонент по-прежнему может иметь собственное, частное состояние:

var vmA = new Vue({ 
data: { 
privateState: {}, 
sharedState: store.state 
}
});

var vmB = new Vue({ 
data: { 
privateState: {}, 
sharedState: store.state 
}
});

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

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

Это вновь приводит нас к Vuex, так что если вы дочитали до этого места — пожалуй, пора его попробовать!

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .

nodkz / readme.md

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

Так вот начнем с далека. Человек изобрел транзистор. Из них собрали регистры, логичейские гейты AND, OR, XOR и пошла поехала булевая логика. Еще чутка напряглись и собрали калькуляторы и компьютеры. Поняли, что считает эта штука быстрее человека, и надо туда засовывать всё больше и больше вычислительной логики.

В 50-ых минули времена инструкций и чистого ассемблера, придумали языки программирования высокого уровня, типа Fortran, который позволял людям быстрее писать программы. Завезли туда переменные (VARIABLES) и начали писать безумные алгоритмы вычисления.

Так активно писали, что где-то в 60х запарились и придумали функции (FUNCTIONS), чтоб изолировать/инкапсулировать куски логики и алгоритмов. Привет функциональному подходу из 60х.

В 70x годах в языке Simula появились принципы Объектно Ориентированного Программирования – наши любимые классы и инстансы (CLASS). Просто логика стала настолько активно расти, что пришлось ряд переменных и функции, которые их обслуживают, объединять и инкапсулировать в новую сущность – класс. Привет ООПшникам из 70х.

Где-то в 80-ых стали активно развиваться параллельные вычисления. Народ намучился с синхронизацией состояния. И появился паттерн Наблюдатель (Observable), который позволяет объекту получать оповещения об изменении состояния других объектов.

В 90х появился HTML. А чуть позже появился JavaScript (в 1995). Событие по знаковости, как в 50-ых появились языки программирования высокого уровня. Даешь странички с примитивной типографикой и гиперссылками!

Ах да, и большинство наших зрителей появились тоже в 90х. Привет вам всем огромный.

В нулевых появился Gmail (2004) – первый SPA (Single Page Application). Началась эра веб-клиентов с богатой логикой на своей стороне. Событие по знаковости, как в 60-ых появились функции. Даешь больше логики на клиенте!

В 10ых стали появлятся Angular, Ember, React и прочие. Событие по знаковости, как в 70-ых появились классы. Стока много кода и логики, надо все объединять, собирать и структурировать. Давай фреймворки в браузеры!

Ну и к 20 году мы с вами заговорили о Стейт Менеджерах. Событие по знаковости, как в 80-ых появились параллельные вычисления и паттерн Observable. Мы замучались синхронизировать состояние в разных частях приложения. Даешь синхронизацию, даешь Стейт Менеджеры!

Т.е. история развивается по спирали. Фронтендеры – это бэкендеры со сдвигом в 40-50 лет, которые смогли начать программировать только в 2000х годах.

Так что такое Стейт Менеджер? Все до банальности просто:

• это одна или несколько переменных из 50х (например адресная строка в браузере)
• набор функции из 60х, либо класс из 70х (например History API, которые позволяет менять адресную строку)
• и паттерн Observable из 80х (например event handler window.onpopstate) Всё это взяли объединили и получили BrowserHistory (который используется к примеру в React Router) — примитивный стейт менеджер, который позволяет управлять браузерной строкой и подписываться на ее изменения.

Итак, джентельменский набор любого стейт менеджера это — набор переменных, набор функций для изменения этих переменных и какой-нибудь Observable, который позволяет вам подписаться на изменения этих самых переменных.

И всякие там истории предыдущих состояний, иммутабельность, реактивность, потоки, EventEmitter, декораторы, thunk’и, хождение по сети за данными – это все сахар, ну или разновидности имплементации стейт менеджеров.

Переменная + Функция + паттерн Observable = вот оно мое базовое определение Стейт Менеджера. Ну а сверху уже добавляются разный примочки под определенные задачи.

Redux, Redux Toolkit и МоbX

Научитесь работать с менеджерами состояний на уровне middle

Начать бесплатно

State Managers упрощают работу с данными, приводя их к единой системе

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

State Managers

State Managers — это глобальное хранилище данных внутри приложения или сайта. Они помогают управлять данными внутри объекта состояния (state) и упрощают работу с кодом.

State Managers

State Managers — это глобальное хранилище данных внутри приложения или сайта. Они помогают управлять данными внутри объекта состояния (state) и упрощают работу с кодом.

По данным hh.ru за 2022 г.

Redux

Менеджер состояния на базе JavaScript. Позволяет управлять данными и пользовательским интерфейсом внутри приложения.

Redux Toolkit

Набор инструментов, разработанных для упрощения написания кода и управления состоянием в React-приложениях, использующих Redux.

MobX

Менеджер состояния, аналог Redux. В отличие от Redux имеет несколько хранилищ и требует меньше шаблонного кода, что облегчает работу разработчика.

Курс подойдет, если вы

Хотите освоить технологию с нуля

Вы уже работаете в компании или на стартапе, но ощущаете нехватку знаний по части State Managers. Хотите быстро научиться, чтобы улучшить качество своего кода.

Стремитесь к уровню middle

Вы уже освоили JavaScript и основы React и готовы заниматься более глобальными проектами. Хотите научиться использовать State Managers для собственных проектов и уменьшить количество ошибок в работе приложений.

Уже изучали Redux, RTK и MobX

Вы владеете навыками junior frontend-разработчика, в том числе основами State Managers. Хотите погрузиться в тему более основательно и за счет этого поднять свой грейд до уровня middle.

Начните сейчас и поймите, для чего нужны State Managers

Вы узнаете в бесплатном модуле:

• Что такое State Managers? Их определение и задачи.
• Чем отличается Redux от MobX?
• Какие еще есть инструменты в других фреймворках?

Начать бесплатно

Что вы получите на курсе?

Результат

Материал курса

Углубленная практика

Закрытый чат

Служба заботы

Комфортное обучение

Вас cпросили на собеседовании: «Что такое State Managers?»

Сейчас:
Что-то слышал про Redux, но пока работаю на чистом React. Не могу точно объяснить, как их использовать, но, кажется, они нужны, чтобы данные везде менялись одновременно.

После курса:
Менеджеры состояния нужны, чтобы управлять данными внутри приложений. Они упрощают работу с кодом. Я знаю Redux, умею работать с RTK и знаком с MobX.

Программа курса

Цель урока — узнать, что такое менеджеры состояния и какую проблему они решают.

• Вспомните, что такое состояние, и узнаете отличия локального состояния от глобального.
• Поймете, что такое менеджеры состояний и с какими проблемы они помогают справиться.
• Сравните два популярных инструмента для управления состоянием — Redux и MobX.
• Узнаете, какие инструменты для управления состоянием используются в других фреймворках.

Основы. Реализация собственного Redux

Цель урока — изучить ключевые концепции Redux в процессе его реализации.

• Разработаете собственный Redux.
• Напишете собственный Redux. Actions.
• Напишете собственный Redux. Reducers + Store.
• Напишете собственный Redux. Интеграция с DOM.
• Замените собственный Redux готовым.
• Интегрируете Redux в приложение на чистом JavaScript.

Redux. Основы. Использование с React, часть 1

Цель урока — начать использовать Redux в React-приложениях.

• Сравните использование Context API и Redux.
• Узнаете, зачем нужен React Redux, если есть обычный Redux.
• Поймете назначение хуков библиотеки React Redux.
• Интегрируете Redux в React-приложение.

Redux. Основы. Использование с React, часть 2

Цель урока — начать использовать Redux в React-приложениях.

• Научитесь типизировать Redux при помощи TypeScript.
• Узнаете, что такое middleware, и научитесь писать их под Redux.
• Изучите Redux Thunk middleware для работы с асинхронной логикой.
• Научитесь сохранять store в постоянном хранилище с помощью Redux Persist.
• Разберетесь, как отлаживать код с помощью Redux DevTools.

Цель урока — научиться работать с Redux Toolkit для упрощения и ускорения процесса разработки приложений с использованием Redux.

• Познакомитесь с основами Redux Toolkit и его преимуществами.
• Научитесь настраивать хранилище с помощью функции configureStore().
• Освоите создание слайсов с помощью createSlice() для управления частями состояния.
• Разберетесь в создании асинхронных thunk-функций с использованием createAsyncThunk().
• Научитесь использовать TypeScript вместе с Redux Toolkit.

Цель урока — освоить RTK Query для упрощения работы с запросами к API.

• Создадите API-слайсы и выполните запросы на получение и отправку данных.
• Избежите дублирования запросов за одними и теми же данными.
• Удалите чистый Redux Thunk из проекта.

Цель урока — научиться формировать структуру приложения с использованием Redux.

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

Цель урока — овладеть практическими навыками применения Redux в реальных задачах.

• Создадите приложение с использованием Redux Toolkit, реализующее CRUD-операции.
• Реализуете вход в систему с использованием RTK Query.
• Рассмотрите лучшие практики и научитесь избегать антипаттерны при работе с Redux.

Аналоги. MobX, часть 1

Цель урока — понять основные концепции MobX на примере приложения на чистом JavaScript.

• Познакомитесь с МobХ.
• Подключите МobХ к корзине на js. Reactions.
• Добавите действия (actions).
• Мемоизируете подсчеты (computations).

Аналоги. Mobx, часть 2

Цель урока — научиться использовать MobX в React-приложениях.

• Интегрируете MobX в React-приложение.
• Используете TypeScript в связке с MobX.
• Выполните асинхронные запросы с использованием Flow.

Аналоги. MobX. Практика

Цель урока — овладеть практическими навыками применения MobX в React-приложении.

• Замените Redux на MobX в существующем приложении.
• На практике используете MobX для разработки.

Остались вопросы?

Наш отдел заботы ответит на любой вопрос.

Задать вопрос Написать

Получите документ после курса

По окончании курса вы получите сертификат от Result School, подтверждающий вашу квалификацию.

Алексей Попков

• Автор образовательных программ Git и State Managers для junior и middle
• Опыт fullstack-разработки более 7 лет
• Пишу frontend и backend на TypeScript
• Участвовал в таких конференциях, как MoscowJS, Ozon Tech, Avito Tech, YaTalks
• Ненавижу медленные интерфейсы. Одна из причин — сам их разрабатываю
• В работе решаю нетривиальные задачи

State Managers — это стандарт
разработки многокомпонентных проектов

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

Важная галочка в резюме

Всего за две недели обучения.

Авторский опыт

Получите знания из «первых уст» от практикующего специалиста.

Сложные кейсы

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

Куратор уровня middle

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

Индивидуальный темп

Учитесь в своем темпе, когда вам удобно.

Коммьюнити

Знакомьтесь, обучайтесь вместе и помогайте друг другу.

Важная галочка в резюме

Всего за две недели обучения.

Авторский опыт

Получите знания из «первых уст» от практикующего специалиста.

Преимущество курса №1

Начните обучение сейчас! Начните сейчас

Redux, Redux Toolkit и MobX

• Доступ к материалу и всем обновлениям на 12 месяцев.
• Месяц кураторской поддержки в чате.
• Тесты и практика.
• Проверка вашего практического задания и подробная обратная связь.
• Доступ к курсу открывается сразу после оплаты.

Вернем деньги, если курс не понравится вам за первые три дня.

Часто задаваемые вопросы

Что нужно знать для старта?

Любой язык программирования на базовом уровне. Git используется в большинстве IT-профессий, поэтому порог вхождения достаточно низкий.

Получу ли я сертификат?

Каждый выпускник курса State Managers получает сертификат от Result, который можно прикрепить к своему резюме.

Сколько длится курс?

Курс рассчитан на 14 дней. За это время вы проходите все необходимые для middle-разработчика темы в State Managers и отрабатываете полученные знания на практике.

Как проходит обучение?

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

Сколько времени нужно будет уделять учебе?

Разным людям необходимо разное количество времени. На курсе State Managers на просмотр уроков и выполнение заданий будет уходить не более часа в день. Если окажется, что вам нужно больше времени, это не значит, что у вас не получится. Это значит ровно то, что нужно заниматься чуть больше, чтобы освоить материал.

На какое время доступен курс и чат?

Доступ к курсу и чату — год, кураторская поддержка — 2 недели.

Могу ли я вернуть деньги?

Да, мы вернем деньги, если курс не понравится вам за первые три дня.

Могу ли я оплатить бонусными монетами?

Да, вы можете оплатить бонусными монетами до 20 % стоимости курса.

Остались вопросы?

Мы считаем, что практическое образование — ключ к результативному обучению. Данный курс также наследует этот принцип.

Вы можете получить бесплатную консультацию: отдел заботы ответит на любые вопросы.
Получить консультацию

Почему мы этим занимаемся

Доказываем, что попасть в IT реально.

В основе курса — актуальные данные. Обучаем на практике и без воды.

Даем реальные задачи, над которыми работают
в IT-компаниях прямо сейчас.

Помогаем найти работу, сделать качество жизни лучше и начать карьеру в разработке.

Информация

Направления

Подпишитесь

• ИП Минин В. И.;
• ИНН 781714316555;
• ОГРНИП 317784700113455

Любое использование материалов с данного сайта допускается не иначе как с письменного разрешения его правообладателя — 781714316555 ИНН/ОГРНИП номер от 317784700113455. Использование материала с сайта и нарушение авторских и смежных прав правообладателя наказывается в соответствии со ст. 146 УК РФ. Вся информация, предоставленная на сайте, ни при каких условиях не является публичной офертой, определяемой положениями ст. 437 (2) ГК РФ.

Мы используем cookie. Продолжая использовать сайт, Вы даете свое согласие на использование cookie для хранения данных. Подробнее.