Thunk

What Is It And How To Incorporate It In Your Next React-Redux Project

Courtesy of www.nan-labs.com

When using Redux, we reconfigure our components to allow for a global state that can be passed in as props and updated accordingly. This can drastically simplify our logic, as we no longer have to worry about potentially passing props down a long on child components. We use action creators to dispatch an action and adjust our Redux store accordingly.

In the long run, this can simplify an app if you understand the basic Redux data flow. Now that our store is global we may want to make fetch requests to our API and, in turn, dispatch actions. Note that we can’t simply make a fetch request inside the action creator function, as a fetch request has an asynchronous nature. That’s where Redux-Thunk comes in.

Typically our action creator returns a plain old Javascript object. Thunk gives our action creator the ability to return a function that gets passed to the stores dispatch as an argument. In summary, Thunk is a type of middleware that will allow us to slightly alter the behavior of our actions, allowing us to make asynchronous requests.

To get started we need to npm install redux-thunk and import thunk in our index.js file. To incorporate it, also import applyMiddleware, which is included in our redux library. Call createStore with its second…