State management refers to the management of the state of one or more
user interface
In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine f ...
controls such as text
fields, OK buttons,
radio button
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options. The singular property of a radio button makes it distinct from checkboxes, where the user ...
s, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls. For example, a state managed UI control such as a button will be in the enabled state when input fields have valid input values and the button will be in the disabled state when the input fields are empty or have invalid values. As applications grow, this can end up becoming one of the most complex problems in user interface development.
This is especially the case when the state of any particular message or form on the page depends on factors outside of the current page, or available throughout several pages. For example, consider a user who is logged in and sees the 'welcome' message on their first visit to any page, but not on subsequent page visits. Does each page manage the state of the user being logged in? That would create too much copy pasting and duplication of code. Instead, you can use a state management pattern for handling messages (this may also include handling error messages and informative messages, along with the described welcome message) and then call this to receive a message as it becomes available.
Examples of state management libraries include Pinia as a state management library for the
Vue.js JavaScript framework. The
Angular framework includes its own library using
Observables
In physics, an observable is a physical quantity that can be measured. Examples include position and momentum. In systems governed by classical mechanics, it is a real-valued "function" on the set of all possible system states. In quantum p ...
called RxJS and
Redux is a general-purpose state management library that can be used with any of the above frameworks or other view libraries, but is very commonly used with the
React REACT or React may refer to:
Science and technology
* REACT (telescope), a telescope at Fenton Hill Observatory, New Mexico, US
Computing
* React (JavaScript library) , a JavaScript library for building user interfaces, from Facebook
** React Nat ...
library. As the documentation in Redux alludes, many of these state management libraries are lightweight and can be replaced by each other.
It's also possible to roll your own based on a
publish–subscribe pattern
In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published mes ...
where your interface components (like form fields, buttons, and messages) listen to a centralized data store in your application for new changes.
See also
*
Data binding
*
Observer pattern
In software design and engineering, the observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by ca ...
References
User interfaces
{{Software-stub