Adding a callback to a Redux Reducer

The idea is not wrong, the implementation is.

Instead of adding a callback, return a promise from the action (you will need redux-thunk middleware or some similar alternative).

Then you can simply do:

dispatch(myAction).then(callback);

Of course, you can also simply dispatch another action in your callback, which usually end up being one compound action.

const myAction = ...const callbackAction = ...const compoundAction = () => dispatch => {     dispatch(myAction())         .then(() => dispatch(callbackAction()));};

The third principle of Redux (listed in the introduction section of the docs) is that 'changes are made with pure functions'.

A pure function is a function that always returns the same result given the same inputs, and doesn't cause any side effects. Having a callback log something out most definitely would be a side effect!

The docs go on to say:

It's very important that the reducer stays pure. Things you should never do inside a reducer:

• Mutate its arguments;
• Perform side effects like API calls and routing transitions;
• Call non-pure functions, e.g. Date.now() or Math.random().

The reasoning behind this is it makes your reducers predictable - you know that, given an action with a certain payload, you're guaranteed to have the same output. This makes your app both easier to understand as a developer, and easier to unit test.

If you want to perform side effects when an action takes place, you should install a middleware that allows you to do so - some common examples of these are:

• redux-thunk, which allows you to dispatch functions that can in turn dispatch actions (commonly used to make API calls)
• redux-logger, which allows you to log out actions that are dispatched.
• redux-devtools-extension, which allows you to view your state and actions in a Chrome devtools extension.

If you can't find a middleware package that does what you need (rare, to be honest - there's lots out there already!), you can write your own quite easily.

Callbacks introduce side-effects, so when using Redux you should consider returning a new state with the result, for example with done: true flag and react to that in componentDidUpdate.

For managing asynchrony and effects you can use redux-saga, redux-thunk, RxJs or another library.If you want to stick with callbacks, why even bother with Redux?