How to use Redux DevTools to time travel and inspect previous states in async actions

Question

Can you explain to me How to use Redux DevTools to time travel and inspect previous states in async actions?

Answer 1

To use Redux DevTools for time travel and inspecting previous states in async actions:

1. Setup DevTools:

Configure your Redux store with DevTools:

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));

2. Dispatch Async Actions:

Async actions (e.g., via redux-thunk/saga) dispatch multiple actions like:

ACTION_REQUEST

ACTION_SUCCESS

ACTION_FAILURE

3. Open Redux DevTools in Browser:

Go to Developer Tools > Redux tab.

4. Inspect Actions and State:

Each action appears in a timeline.

Click an action to view state before/after that action.

5. Time Travel Debugging:

Use slider or action list to select a past action.

Click "Jump" to revert app UI and state to that point.

Helps trace state changes during async flows.