Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Redux in Action: learn to manage and consolidate state

913 views

Published on

The Redux JavaScript library consolidates state in a single object, radically simplifying one of the largest sources of bugs. Whether you're passing data through several layers of components or sharing and syncing data between unrelated parts of the app, Redux makes state management a breeze.
With Redux in Action, you'll discover how to integrate Redux into your React application and development environment.

Save 42% off Redux in Action with code slgarreau at: https://livebook.manning.com/#!/book/redux-in-action/chapter-1/

Published in: Software
  • Be the first to comment

Redux in Action: learn to manage and consolidate state

  1. 1. Debugging with Redux DevTools Save 42% off Redux in Action with code slgarreau at manning.com.
  2. 2. Redux Developer tools As you might be aware, Redux was born out of a desire for a better client-side development experience. Redux developer tools are designed to save valuable developer hours, and make for a more enjoyable day on the job.
  3. 3. Redux Developer tools Historically, time spent tracking down unexpected behavior could be one of the most egregious time sinks in a developer’s day. Chasing state changes in a complex application using two-way databinding has eaten many developers’ days.
  4. 4. Redux Developer tools Luckily, Redux’s Flux architecture pattern successfully reduces some of the mental overhead required to keep up with state changes, thanks to its unidirectional dataflow. Standardizing on actions as the vehicles of state change introduced a certain clarity: regardless of what initiated it, a change in state can be traced back to an action.
  5. 5. Introducing Redux DevTools The Redux DevTools can be used to display actions in real time.
  6. 6. Introducing Redux DevTools On the previous slide, on the right side of the image, you can see a highlighted list of items—the actions that have been dispatched to produce the state displayed. Given this list of actions, you can tell exactly what has been going on in the app!
  7. 7. Introducing Redux DevTools It’s really handy to have immediate feedback on each new action as it’s dispatched. Not only can we view the action produced, we can see the application state that resulted from that action. We can also dig into the Redux store and see the exact values that changed as a result of an action.
  8. 8. Redux DevTools and the store The DevTools highlight attributes of the Redux store that have changed as a result of the action.
  9. 9. Time-travel debugging Clicking the title of an action in the DevTools toggles that action off. The application state is recalculated as if that action was never dispatched, even if the action is in the middle of long list of actions. Click it again, and the application returns to its original state.
  10. 10. Time-travel debugging Toggling an action recalculates the application state as if the action was never dispatched.
  11. 11. Time-travel debugging This rewinding and replaying of actions inspired the name time-travel debugging. There’s no need to refresh and re-create the state— just hop back in time by disabling an action. You can also use the slider UI to scroll back and forward through actions, seeing their immediate effect on the application.
  12. 12. Visualizing changes with DevTools monitors The Redux DevTools provide an interface to the actions and Redux store but don’t actually provide a way to visualize that data—this work is left for monitors. Separating the two was a conscious decision, enabling the community to plug and play their own data visualizations, according to their needs.
  13. 13. Visualizing changes with DevTools monitors Various monitors can be combined with the Redux DevTools to visualize actions and store data.
  14. 14. Visualizing changes with DevTools monitors Several monitors are open-source libraries which are ready for use. The default monitor is called the Log Monitor, the Slider Monitor and Inspector Monitor are two other, commonly-used monitors. For more monitors, check https://github.com/gaearon/redux-devtools
  15. 15. Implementing the Redux DevTools Let’s say that you’ve just been tasked with implementing the DevTools in your budding new application, and the first choice you have to make is how you’d like to view the monitors. There are a few popular options:  In a component within the application  In a separate popup window  Inside your browser’s developer tools
  16. 16. Implementing the Redux DevTools We recommend using the Redux DevTools via the Chrome browser developer tools for several reasons First, the installation is easier than any other option. Second, the integration with our existing development workflow is seamless. Finally, the extension includes a robust set of monitors that continues to meet our needs out of the box.
  17. 17. Implementing the Redux DevTools Many JavaScript developers already spend a lot of time using Chrome DevTools, and installing the Redux Devtools plugin just adds one more panel. *note* Redux and Chrome both refer to their developer tools by the abbreviation “DevTools.” This can get confusing, so pay attention!
  18. 18. Implementing the Redux DevTools The first step is to install the Redux DevTools Chrome browser extension, which is as simple as it sounds. Then you need to add Redux DevTools to the store, which is a bit more complex.
  19. 19. Implementing the Redux DevTools To add the Redux DevTools to the store, we’ll download and instrument the package. Install and save the package to your development dependencies with the following command: yarn add –D redux-devtools-extension
  20. 20. Implementing the Redux DevTools Once installed, we’ll import and pass a function called devToolsEnhancer to the store. Redux’s createStore function takes up to three arguments: a reducer, an initial state, and an enhancer.
  21. 21. Implementing the Redux DevTools In the event that only two arguments are passed, it is presumed the second argument is an enhancer and there is no initial state – as shown below: import { devToolsEnhancer } from 'redux-devtools-extension'; … const store = createStore(tasks, devToolsEnhancer()); …
  22. 22. Implementing the Redux DevTools Enhancers are a way to augment the Redux store and the devToolsEnhancer function is doing just that: connecting the store with the Chrome extension to provide additional debugging features. Awesome!
  23. 23. Implementing the Redux DevTools The Redux DevTools are located in the Redux panel in Chrome developer tools.
  24. 24. Implementing the Redux DevTools Once you’ve navigated to the Redux DevTools, you should see the Inspector Monitor by default, which you can confirm by verifying that the upper left menu of the tools reads Inspector.
  25. 25. Implementing the Redux DevTools The skip, diff filter, and monitor menu options offer unique ways to visualize and debug state effects.
  26. 26. Implementing the Redux DevTools To use the Redux DevTools in a component within your app, the setup process is slightly more long- winded. You’ll likely want to make use of the Dock Monitor. Full instructions are in the README this GitHub repo: https://github.com/gaearon/redux-devtools.
  27. 27. For more info on Redux in Action, download the free first chapter here. Save 42% off Redux in Action with code slgarreau at manning.com. Also see:

×