Time travel debugging

One requirement of reducer functions in Redux is that they're pure; that is, they only return new data as opposed to mutating existing data. One consequence of this is that it enables time travel debugging. Because nothing ever changes, you can move the state of your application forward, backward, or to an arbitrary point in time. The Redux DevTools make this easy to do.

To see time travel debugging in action, let's type some filter text into the filter input box:

Looking at the actions in Redux DevTools, you should see something along these lines:

I've selected the last SET_FILTER_VALUE action that was dispatched. The filterValue value should be native b, which reflects the titles that are currently displayed. Now, let's travel back to two actions ago. To do this, move your mouse pointer over the action that's two positions behind the currently selected action. Click on the Jump button, and the state of the application will be changed to the state when this SET_FILTER_VALUE was dispatched:

You can see that filterValue has changed from native b to native. You've effectively undone the last two keystrokes, updating the state and the UI accordingly:

To bring the application state back to the current time, follow the same process but in reverse. Click on Jump on the most recent state.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.29.145