Redux Thunk For Dummies

When you're going through a coding bootcamp, sometimes the material comes at you so quickly that it can be difficult for all the concepts to sink in. When certain concepts are building on top of other ones, if you don't get something right away you can quickly become lost.

Most recently, I found that tricky concept to be redux-thunk. However, I'm here today to explain what I've learned in hopes of helping anyone else who might be struggling to see it in a new light!

When working in regular React without Redux, making asynchronous calls is fairly straightforward. You can, for example, put a GET request with fetch() in componentDidMount() and update state with the response, which will in turn re-render the component with the new state.

The problem in Redux, however, comes down to dispatching actions to reducers. The benefit of async is that your program can keep running and doesn't get held up waiting for a request response, but the downside is this can lead to things happening in an order that you don't expect. Because of the asynchronous nature of fetch(), if you make a request inside an action creator function like normal, the action creator will return an action before the promise from fetch is resolved, meaning when your reducer goes to update state, it probably won't have the information you were expecting.

This is why we need redux-thunk: we need a way to delay the dispatch of the action, otherwise state will get updated before the promise from our fetch() call is resolved and we won't have the correct information.

As you might have heard, redux-thunk is a very small package. You can see the entirety of the behavior in the following code (reproduced here from the redux-thunk github repo):

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

That's basically all there is to it! If you're confused about what's going on here, the important thing to look at to start getting a handle on it is the if statement. As stated in the redux-thunk documentation, "Redux Thunk middleware allows you to write action creators that return a function instead of an action". So, looking at the conditional logic inside the thunk code, you can see that we're creating a queue of sorts. While the action it receives is a function, it will return that function with dispatch as an argument. It will do this until the action's type is just a plain Javascript object, rather than a function. In this way, we can queue up our actions, and make sure our reducer doesn't return a new state until we have the resolved response from our fetch() call.

And that's about it!