As we have discussed, Redux is inspired by the Flux pattern, so it also follows its architecture. That means that state changes will be sent to the store and the store will handle actions to communicate between components.
Let's see how the data and logic work through the following diagram:
Observe the following points to get an understanding of the Redux architecture:
- You can see in the preceding diagram, at the bottom right-side, the component's trigger actions.
- State mutation will happen the same way as it works in a Flux request and it might have an API request as another effect.
- Here Middlewares play an important role, such as handling actions for listening promise statuses as well as taking new actions.
- The Reducers take care of actions as a middleware.
- The Reducer as a middleware gets all the action requests and it is also associated with the data. It has rights to globally change the state within the application store by defining a new state.
- When we say state changes, this relates to reselecting its selector and transforming data and passing through components.
- As components get the change request, accordingly, it renders the HTML to the DOM elements.
Before we move ahead, we have to understand the flow to have a smooth structure.
Compared to other frameworks, Redux has more benefits:
- It might not have any other side effects
- As we know, binding is not needed because components cannot interact directly
- States are managed globally so there is less possibility of mismanagement
- Sometimes, for middleware, it would be difficult to manage other side effects
From the aforementioned points, it's very clear that Redux's architecture is very powerful and it has reusability as well. Let's look at a practical example to see how Redux works with React.
We will create our Add Ticket form application in Redux.