![]() You should see a JavaScript function stack trace in the panel, with several sections of source code showing the lines that were executing when the action reached the store. Try clicking the "Trace" tab in the upper right. The DevTools have several more commands and options to help you debug your app. The ability to see what is happening inside of our app and how our state is changing over time is very powerful! ![]() We can see that this action object looked like this:Īnd if you click the "Diff" tab, you can see that the field changed from a 3 to a 6 in response to that action. Now select the last "counter/incrementByAmount" entry from the list on the left, and click the "Action" tab on the right side: You should see a total of five actions dispatched, one for each time we clicked a button. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |