Hooks for profiling

[brentvatne]

It would be useful to be able to have hooks at various points during dispatch:

1. Before firing currentReducer
2. After currentReducer is complete
3. Before firing all listeners (pass in listeners array)
4. Before firing each listener (pass in the listener)
5. After firing each listener
6. After firing all listeners

Additionally, if we add the displayName for the wrapped React component when using @connect as a property to the listener, we'd be able to determine what component is being updated.

[gaearon]

It would be useful to be able to have hooks at various points during dispatch

Points 1 to 6 can be implemented in userland as a “store enhancer”—essentially a createStore -> createStore function. You can take a look at https://github.com/tappleby/redux-batched-subscribe for what the implementation could roughly look like (with different logic, of course). Basically you'd wrap reducer in constructor, wrap listener in subscribe, and expose some methods to read the measurements.

Something like

redux-hook // or something like that

export default function hook(wrapReducer, wrapListener) {
    return (next) => (reducer, initialState) => {
        const store = next(wrapReducer(reducer), initialState);
        return {
            ...store,
            subscribe: (listener) => {
                return store.subscribe(wrapListener(listener));
            }
        };
    };
}

Usage:

store/configureStore.js

import hook from 'redux-hook'; // above

export let measurements = {}; // todo: update them

const trackReducer(reducer) {
    return (state, action) => {
        // todo: begin measurements
        let result = reducer(state, action);
        // todo: end and record measurements
        return result;
    };
}

const trackListener(listener) {
    return () => {
        // todo: begin measurements
        listener();
        // todo: end and record measurements
    };
}

const finalCreateStore = hook(trackReducer, trackListener)(createStore);

export default function configureStore(initialState) {
    return finalCreateStore(reducer, initialState);
}

store/index.js

import configureStore from 'store/configureStore';
const store = configureStore();
// ...

Additionally, if we add the displayName for the wrapped React component when using @connect as a property to the listener, we'd be able to determine what component is being updated.

Isn't that <connect result>.WrappedComponent.displayName?

[gaearon]

Closing for inactivity.