Middleware should be passing EFFECT actions?

Hi, I’m currently building a performance-critical app:

• that fires many actions per second (~x60 per second)
• that has many react-redux connect()ed components
• that has many sagas running in parallel to take care of effects (~x5 effects per action)

Since I’m also relying heavily on multiple sagas to take care of effects, I get many saga-related actions running through my redux reducers (EFFECT_TRIGGERED, EFFECT_RESOLVED, EFFECT_REJECTED), but I don’t think it is necessary for them to go normal redux reducers, because they are dealt only by sagas anyway.

So I implemented something like:

const no_saga_actions = () => next => action => {
    if (action.type != 'EFFECT_TRIGGERED' &&
        action.type != 'EFFECT_RESOLVED' &&
        action.type != 'EFFECT_REJECTED') return next(action);
};

where my redux configuration store looks like:

const store  = createStore(
    combined_reducer,
    applyMiddleware(
        createSagaMiddleware(...combined_saga),
        no_saga_actions,
    )
);

I know I have to minimize the number of effects and connect()ed components to increase speed eventually, but this has resulted in much greater performance already, simply because my redux store is receiving less actions and that results in less connect()ed wrapper renders.

I wonder if passing saga-related actions is by design, or if there should be an option somewhere to prevent it from flowing to redux reducers (or if you would like me to submit a PR for that)…?

Thanks!

[slorber]

@joonhyublee this might interest you: http://stackoverflow.com/questions/34782249/can-a-react-redux-app-really-scale-as-well-as-say-backbone-even-with-reselect/34788570

[joonhyublee]

Just to add, it can be difficult to use existing redux monitoring tools to see all the actions that are being passed to the store, simply because there are too many actions being fired per second and devtools designed to scrutinize individual actions can’t keep up. So I wrote a simple aggregate analytics middleware to use in conjunction with react perf addon:

const make_analytics = () => {
    const perf = React.addons.Perf;
    let stats = {};
    let is_counting = false;

    const count_action = action => {
        if (is_counting) {
            if (!stats[action.type]) stats[action.type] = 1;
            else stats[action.type] = stats[action.type] + 1;
        }
    };

    const start = () => {
        is_counting = true;
        perf.start();
    };

    const stop = () => {
        is_counting = false;
        perf.stop();
        console.log(stats);
        perf.printWasted();
        stats = {};
    };

    const get_stats = () => {
        console.log(stats);
    };

    return {
        count_action,
        start,
        stop,
        get_stats
    };
};

window.analytics = make_analytics();

const analytics_middleware = store => next => action => {
    window.analytics.count_action(action);
    return next(action);
};

and using it looks like:

store  = createStore(
    combined_reducer,
    applyMiddleware(
        analytics_middleware,
        createSagaMiddleware(...combined_saga),
        ignore_middleware
    )
);

in case you are wondering what my ignore_middlware looks like:

const ignore_middleware = store => next => action => {
    if (action.type != 'REQUEST_NAVIGATION') return next(action);
};

@yelouafi sorry, this is not really redux-saga specific, but thought I’d share since somebody asked… 😃