Войти
Управление состоянием относится к управлению состоянием одного или нескольких элементов управления пользовательского интерфейса, таких как текстовые поля , кнопки OK, переключатели и т. д. в графическом интерфейсе пользователя. В этом методе программирования пользовательского интерфейса состояние одного элемента управления пользовательского интерфейса зависит от состояния других элементов управления пользовательского интерфейса. Например, управляемый состоянием элемент управления пользовательского интерфейса, такой как кнопка, будет находиться во включенном состоянии, когда поля ввода имеют допустимые входные значения, а кнопка будет в отключенном состоянии, когда поля ввода пусты или имеют недопустимые значения. По мере роста приложений это может стать одной из самых сложных проблем в разработке пользовательского интерфейса.
Это особенно актуально, когда состояние какого-либо конкретного сообщения или формы на странице зависит от факторов, выходящих за рамки текущего страница или доступны на нескольких страницах. Например, рассмотрим пользователя, который вошел в систему и видит «приветственное» сообщение при первом посещении любой страницы, но не при последующих посещениях страницы. Каждая ли страница управляет состоянием авторизованного пользователя? Это создало бы слишком много копий и дублирование кода. Вместо этого вы можете использовать шаблон управления состоянием для обработки сообщений (это может также включать обработку сообщений об ошибках и информационных сообщений вместе с описанным приветственным сообщением), а затем вызывать его для получения сообщения, когда оно становится доступным.
Примеры библиотек управления состоянием включают Vuex как библиотеку управления состоянием для инфраструктуры JavaScript Vue.js. Фреймворк Angular включает собственную библиотеку, использующую Observables под названием rxjs, а Redux - это универсальная библиотека управления состоянием, которую можно использовать с любой из вышеперечисленных структур или другие библиотеки представлений, но очень часто используются с библиотекой React. Как упоминается в документации Redux, многие из этих библиотек управления состоянием легковесны и могут быть заменены друг на друга. Также можно использовать собственный алгоритм на основе алгоритма pub-sub, при котором компоненты интерфейса (например, поля формы, кнопки и сообщения) прослушивают централизованное хранилище данных в вашем приложении на предмет новых изменений.
function fruitReducer (state, action) {switch (action.type) {case 'add_apple': return {apples: state.apples + 1}; case 'add_banana': вернуть {бананы: state.bananas + 1}; case 'remove_apple': return {яблоки: state.apples - 1}; case 'remove_banana': вернуть {бананы: state.bananas - 1}; по умолчанию: выбросить новую ошибку («Тип необработанного действия.»); }}} отправка ({type: "add_apple"});.
