Dispatching multiple actions with redux

[alexnm]

I'm pretty new to redux and haven't worked with it on a large scale project, so I'm wondering if what I'm doing here is ok. I want to dispatch an action and at the same time dispatch a notification for the user, so I was thinking of using redux-thunk to create this "high order" action to dispatch both actions in parallel.

export const addToCart = ( product ) => ( dispatch ) => {
    dispatch( addToCartAction( product ) );
    dispatch( Notification.info( "Product added to cart" ) );
};

I saw that in most of the cases redux-thunk is used for async or conditional dispatch, so I was wondering if there's another way of achieving this? Feel free to point me to some examples if you have any.

Thanks, Alex

[alexpausan]

Hi Alex, I've used https://github.com/mrydengren/redux-batch-middleware to wich you can send an array of actions to be dispatched. So it would be something like:

export const addToCart = ( product ) => ( dispatch ) => {
    dispatch([addToCartAction(product), Notification.info("Product added to cart")]);
};

or you can have the extended version of mapDispatchToProps, in which you could have it written this way:

function mapDispatchToProps(dispatch) {
    return {
        addToCart: (product) => dispatch([
            addToCartAction(product), 
            Notification.info("Product added to cart")
        ]),
    };
}

The problem with it though, is that if one of the actions that you want to dispatch in batch, is a thunk, then it would not work because it expects an array of actions, which are objects.

This module https://github.com/tshelburne/redux-batched-actions is recommended by Dan Abramov, and looks promising. If you find it interesting please bring some updates :)

Cheers!

[raulmatei]

@alexnm it's fine to have multiple actions dispatched from an action creator, but those two actions are not dispatched in parallel, they get executed one by one when the thunk middleware executes the outer function.

In the end you could choose one of the above examples provided by @alexpausan, but maybe keeping it simple is a better choice.

P.S. This remembers me of batch functionality from another Flux implementation, where you could dispatch multiple actions and emit the change event only when all of them where handled: https://optimizely.github.io/nuclear-js/docs/07-api.html#-reactor-batch-fn-

[alexpausan]

True, the first one it's sintactic sugar, so you may be better without. The second module, redux-batched-actions, may seem able to do the dispatches in parallel, that's how it looks from the example they provided. As I said, didn't look into this to see how it behaves, but @raulmatei may be right though :)

[alexnm]

@alexpausan the example with an array would not work because my notification thingy also dispatches a close notification after x seconds. as for the idea with adding the logic to mapDispatchToProps, that's interesting, didn't think about it, but maybe in this case it's better to encapsulate the behaviour of add to cart into the action creator.

@raulmatei thanks, I think that keeping this simple is the best choice for my case.