It is quite important to understand the Redux life cycle. To understand the Redux life cycle, you must understand the steps involved in a complete cycle. A user interacts with an interface through some events, like clicking on a button to create some resource. For example, to save a doctor record to a database, the user enters the relevant information and hits the Save button. These events initiate some actions. As we mentioned previously, an action is a pure JavaScript object that tells us what happened.

Redux confirms whether the dispatched action contains the type property. After the confirmation, it is passed the main reducer. This is referred to as dispatching an action. An action is dispatched using the following function:

store.dispatch(action)

The entire concept of how Redux operates is illustrated in the following diagram:

The main reducer function, when called with the current state and dispatched action, passes the sub-states and action down to another reducer. As we mentioned in the previous section, the reducer is just a function, and it uses the previous state and provides the new state. Developers prefer to split the state tree into multiple slices and create a separate reducer for each state slice. Actions, on the other hand, can be concerned with more than one state slice. This method of splitting the reducers into smaller and easier to understand pieces is termed decomposition.

The new state is returned by the main reducer function and is saved in the Redux store, and all listener functions that are subscribed via store.subscribe() get called. This causes the re-render of user interfaces. We will look at the concept of Redux middleware more in Chapter 6, Extending Redux by Middleware.

So far, we have gone over a lot of theoretical concepts. If it does not make sense entirely, do not worry. It takes some time to sync with the concepts and the flow. To get better insight into how this works, let's get started with the very basic concept of making your first Redux Hello World application.