Adding Asynchronous Actions to Redux

When we last looked at our asynchronous actions before we added in Redux, we had a combination of our ActionCable and reducer calls. This is a problematic combination that requires us to always remember that the two parts need to be called together. What we really want is for our store, now provided by Redux, to mix these asynchronous actions with our regular reducer calls.

Introducing Redux Thunk

To do this, we are going to use an add-on to Redux called Redux Thunk. Redux Thunk is based on a simple idea. Until now, the actions we’ve been passing to our reducer have been mere data objects. What Redux Thunk asks is, “what if those arguments are something else?”

Redux Thunk passes a different kind of argument to dispatch, a function that itself returns a function. Hence the name Redux Thunk, as “thunk” is a generic term for a function that returns a function.

We dispatch the function by calling it. So, where we previously had calls like dispatch({type: "doSomething"}), we now have dispatch(doSomething()) where the call to doSomething itself returns a function.

Note that it is common in the React world to wrap action calls to reducers inside functions that return the action object. So, rather than dispatch({type: "doSomething"}), we’d write dispatch(doSomething()) where doSomething is defined as:

const doSomething = () => {
	return { type: "doSomething" }
} 

We do this so that the functions are easier to manage in complex cases. We haven’t been doing that so far as it’s too much boilerplate code for our purposes, but it’s common in practice.

Betsy Haibel, co-founder of the engineering education firm Cohere, pointed out that a big difference between JavaScript and Ruby ...