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 fro ...
controls such as text
field
Field may refer to:
Expanses of open ground
* Field (agriculture), an area of land used for agricultural purposes
* Airfield, an aerodrome that lacks the infrastructure of an airport
* Battlefield
* Lawn, an area of mowed grass
* Meadow, a grass ...
s, submit 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
A graphical user interface, or GUI, is a form of user interface that allows user (computing), users to human–computer interaction, interact with electronic devices through Graphics, graphical icon (computing), icons and visual indicators such ...
. 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 development problems.
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. For the
Angular framework there exist multiple community options: NgRx (based on Redux, with a lightweight alternative using Signals), NGXS and RxAngular.
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 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, the publish–subscribe pattern (pub/sub) is a messaging pattern in which message senders, called publishers, categorize messages into classes (or ''topics''), and send them without needing to know which components ...
where your interface components (like form fields, buttons, and messages) listen to a centralized
data store
A data store is a repository for persistently storing and managing collections of data which include not just repositories like databases, but also simpler store types such as simple files, emails, etc.
A ''database'' is a collection of data that ...
in your application for new changes.
See also
*
Data binding In computer programming, data-binding is a general technique that binds data sources from the provider and consumer together and synchronizes them. This is usually done with two data/information sources with different languages, as in XML data bin ...
*
Observer pattern
In software design and software engineering, the observer pattern is a software design pattern in which an object, called the ''subject'' (also known as ''event source'' or ''event stream''), maintains a list of its dependents, called observers (a ...
References
User interfaces
{{Software-eng-stub