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.