Discussion of Redux application work

In the previous lessons, we implemented all the components necessary for the Redux application to work. Let's summarize and briefly go through the main stages of our application's work with products.

When the app first runs, it fetches a list of two products from the store using useSelector and displays them on the screen. It also displays a form where we can enter the new product data. When the user clicks the save button, the button handler dispatches the productAdded action containing the new product data that the user entered into the form. The reducer function that we wrote for the slice with products receives this action and adds an object with the new product to the products array. The Store tells the components that the stored state data has changed. Our ProductsList component reads the changed array, calls rendering, and as a result, we see the added product in the list of products.

Now let's open Redux DevTools in the browser and add another product to the application, then look at the Log monitor tab, here we can see what our state was when the application started, and then after clicking the save button, the action appeared. We can see its payload property and changes in the global state.

In the next chapter, we'll get more hands-on with data in our Redux application.