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.
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.
Actions, action creators & dispatchers
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.