Redux

Often when debugging performance issues, additional context can be helpful. Measuring the duration of state changes of your application helps debugging in the Palette profiler.

Redux Integration

To efficiently monitor the redux state of yor application, you can use the measure.start() and measure.end() APIs in a middleware to capture the actions that have fired:

store.js

import { measure } from "@palette.dev/browser";

profiler.on(['markers.measure'], {...})

// A redux middleware that measures redux action latency
const timingMiddleware = () => (next) => (action) => {
  if (performance.mark === undefined) return next(action);

  measure.start(action.type);
  const result = next(action);
  measure.end(action.type);

  return result;
};

Then add timingMiddleware to your redux store's middleware:

store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./reducer";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(timingMiddleware),
});

You should now see redux actions in the Palette profiler.