Redux: It is a library for managing states that follow the principles of the flux architecture & is an independent framework, but for the sake of brevity, we'll assume that we are using it with React.
Single source of truth
The global state of your application is stored in an object tree within a single store.
Global state (store) Unlike React’s standard architecture, the components state isn’t stored in its component class (with exception to specific cases). All data from the view or received by API’s, databases or any other endpoint is stored in a single global object called the store. The goal of the store is to link each component property to one of its properties. This way, every time that a property data is updated, the component its rendered again using the new data instead.
State is read-only: The only way to change the state is to emit an action, an object describing what happened.
Actions
"Actions are payloads of information that send data from your application to your store. They are the only source of information for the store." - redux.js.org
That means that every time that you need to change a property data in the store, you need to dispatch an action. In a more technical description, actions are objects that contain a type property (responsible for informing the store about what kind of action it is supposed to execute) and the payload (the actual data to be altered). It is good practice to maintain all data (except the type) inside a single property called payload.
Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.
Reducers
Although actions can listen to events triggered by the user or by the app, they can't change the state of our store. To make any change in the store, we need to use our middlemen, reducers. Every reducer listens to every action dispatched by the app. It is up to us to define which of these actions it needs to take into account and do something about.
Learn more on JavaScript, the premier front-end language for all new web developers at Byte Academy
