React-Redux集成react-performance中间件配置报错求助

Hey there! Let's figure out why you're running into that error when adding react-performance to your Redux middleware stack.

The Root Cause #

Looking at your code, the issue is that you're trying to pass the result of ReactPerformance.createNotifier() directly into applyMiddleware() — but this isn't a valid Redux middleware. Redux middleware requires a specific function signature (({ dispatch, getState }) => next => action => {}), while createNotifier() returns an object with a send() method for reporting performance metrics, not a middleware function. That's why you're seeing the "not a function" error in your screenshot.

Correct Setup Steps #

Let's adjust your code to use react-performance properly, following the official docs:

1. Remove the notifier from your middleware list
2. Use the notifier to track performance events (like store updates, action processing, or reducer execution)

Modified Store Configuration

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './../reducers/rootReducer';
import createHistory from 'history/createBrowserHistory';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createLogger } from 'redux-logger';
import { loadeState, saveState } from './localstorage';
import ReactPerformance from 'react-performance'

const history = createHistory();
const middleware = routerMiddleware(history);
const loggerMiddleware = createLogger();
const persitantState = loadeState();
// Create the notifier, but don't add it to middleware
const performanceNotifier = ReactPerformance.createNotifier();

export default function configureStore() {
  const store = createStore(
    rootReducer,
    // persitantState,
    composeWithDevTools(
      // Remove `performance` from middleware — it doesn't belong here
      applyMiddleware(thunkMiddleware, middleware, loggerMiddleware)
    )
  );

  // Example: Track Redux store update performance
  let lastUpdateTimestamp = Date.now();
  store.subscribe(() => {
    const currentTimestamp = Date.now();
    const updateDuration = currentTimestamp - lastUpdateTimestamp;
    // Send metric to react-performance
    performanceNotifier.send('Redux Store Update', updateDuration);
    lastUpdateTimestamp = currentTimestamp;
    
    // saveState();
  });

  return store;
}

Example: Track Async Action Performance

You can also use the notifier inside your action creators to measure API call or async task durations:

// In your action file
import { performanceNotifier } from './path-to-your-store-config';

export const fetchUser = (userId) => {
  return (dispatch) => {
    const startTime = Date.now();
    return fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(userData => {
        const requestDuration = Date.now() - startTime;
        // Report the API call performance
        performanceNotifier.send('Fetch User API Request', requestDuration);
        dispatch({ type: 'FETCH_USER_SUCCESS', payload: userData });
      });
  };
};

What This Fixes #

By removing the notifier from the middleware stack, you eliminate the "not a function" error. Then, using the send() method to report specific performance events lets you collect the metrics you need for your reports and charts, just like the official docs intended.

You can expand this pattern to track other Redux-related performance metrics, like reducer execution time or action processing latency, to build out a complete performance profile of your app.

内容的提问来源于stack exchange，提问作者Daniel Nilles