Redux data flow
The idea behind Redux is to manage all state for your application in one centralised data "store". State can be stored for any information in the application. From toggled UI items like buttons or panels to data-models or user information retrieved from a server or several servers.
Redux is labelled across the web as a "predictable state container for Javascript" and is often used to describe the well known Javascript framework Redux. But Redux isn't just an implementation of code, it's a core concept that can be applied across many languages to build applications with a single state container.
The concept aims to help better understand the flow of data within applications by restricting the control of changes to the centralised state by using well-defined, purpose-driven actions and predictable pure functions called reducers.
State & immutability
Application state in Redux is recognised as a single source of truth for all state data. Because state is managed in one place, all application components react to state changes in a synchronised and predictable manner automatically.
State can be arranged in many different forms. It can be used to store feature-specific data such as registration details to support a user journey or collections of entities that represent rows stored in a database. An important rule to remember when updating any application state is that state data is immutable. When data needs to change in objects or arrays for the purpose of creating new state, changes should not be made directly to the existing objects that are stored. Recreate the object or array before storing the updated version.
Recreating state like this has many advantages and will remove the opportunity for unwanted side-effects that can arise from mutating shared state between different parts of the application, which reference the same object or array. A popular library commonly used for immutable state management for Javascript is ImmutableJs, which provides an easy and concise way to copy state.
Actions, action creators & dispatchers
Well-defined actions in applications are used to sufficiently describe important events of interest. Actions are POJO's (Plain Old Javascript Objects) that are created in a format useful to reducers (more about reducers below). Action-creators are responsible for creating actions, which are dispatched to notify the central store or state.
Actions can be created in response to user or system events such as HTTP responses, which can hold a payload of data to update the state.
Reducers as pure functions
Reducers in Redux are responsible for handling the updates of state in the central store. Reducers are pure functions, which means that they are deterministic and predictable. They are just like regular functions but if given the same set of arguments more than once, they must always return the same result. As a rule, they don't produce side-effects, call third party scripts or services and are only dependent on the arguments that have been passed in to the Reducer.
Reducers take the current state of the application and an action as its arguments. Based on the action and current state, new state is derived and returned from the Reducer. Changes to objects within the state require that the object is recreated and properties copied to the new object to avoid mutating the current state.
Enhanced debugging tools
Redux dev tools are available to download as Chrome Extensions. This helps to debug the application by showing you a linear history of application state changes and actions that were used to modify it. Redux will simplify debugging with using unidirectional state flow, which makes interaction with the application predictable and therefore easier to debug. This translates to an easily readable timeline of actions and state change as events occur over time through the application.
A cool feature of Redux dev tools is that it enables time-travel of events through an application allowing developers to rewind or fast forward through a user's journey similar to replaying a video.