When we start the application, the current state count is zero, and so is the number of clicks, so the screen looks like the following:
Our counter application in its initial state.
After some clicks on the following buttons, the value and clicks count get updated, and the view automatically reflects those changes as they happen; see the following screenshot. Be sure to understand how everything happens:
- Whenever you click a button, an action is dispatched.
- When the reducer processes the action, it creates a new state.
- When React sees the state change, it redraws your application. Take a look at the following screenshot:
After every click, the counter value and the number of clicks get automatically updated, and the view is re-rendered
So, we have seen that we can work with Redux in order to keep a global state and have the view re-rendered whenever it's needed, without extra work on our part. Now, let's consider a common problem: how would we deal with asynchronous changes, for example, when we do Ajax calls?