You should see a progress bar fill the button, and after a couple seconds, the displayed value should change to 6. Change the number '2' in the textbox to a '3'.When that action was dispatched, the field changed from 0 to 1.When we clicked the '+' button, an action with a type of 'counter/increment' was dispatched to the store.Click the '+' button in the app, then look at the 'Diff' tab in the Redux DevTools: Let's play with the app first to see what it does. The DevTools will show us how the store state changes as we use the app. If you'd like to try create this project on your own computer, you can start a new Create-React-App project using our Redux template: You can play around with it by clicking the buttons in the app preview on the right, and browse through the source files on the left. Out of the box, it has already been configured with a standard Redux application structure, using Redux Toolkit to create the Redux store and logic, and React-Redux to connect together the Redux store and the React components. The project has been created using the official Redux template for Create-React-App.

It may not be very exciting, but it shows all the important pieces of a React+Redux application in action.

The sample project we'll look at is a small counter application that lets us add or subtract from a number as we click buttons. Now, let's look at a real working example to see how these pieces fit together.

In Part 1: Redux Overview and Concepts, we looked at why Redux is useful, the terms and concepts used to describe different parts of Redux code, and how data flows through a Redux app.

How to view state changes in the Redux DevTools Extension.

The structure of a typical React + Redux Toolkit app.

Reactjs slice