In most applications, there are three parts:

• State – the current data used in the app
• View – the user interface displayed to users
• Actions – events that a user can take to change the state

The flow of information would go like this:

• The state holds the current data used by the app’s components.
• The view components display that state data.
• When a user interacts with the view, like clicking a button, the state will be updated in some way.
• The view is updated to display the new state.

With plain React, these three parts overlap quite a bit. Components not only render the user interface, but they also may manage their own state. When actions that may change the state occur, components need to directly communicate these changes to each other.

Redux helps separate the state, the view, and actions by requiring that the state be managed by a single source. Requests to change the state are sent to this single source by view components in the form of an action. Any components of the view that would be affected by these changes are informed by this single source. By imposing this structure, Redux makes our code more readable, reliable, and maintainable.