What is Redux Thunk

Redux Thunk is a middleware that lets us perform asynchronous operations like API/Ajax calls before modifying the data in a store. Middleware provides a way to interact with actions that have been dispatched to the store before they reach the store's reducer. Examples of different uses for middleware include logging actions, reporting errors, making asynchronous requests, and dispatching new actions.

Let’s say we have an action GET_LOCATIONS which needs to make an Api call to get the list of locations from an API server call and populate the locations[] array in the state. Using Redux Thunk middleware we can perform this async operation outside the component and send the response of the call to update the redux store. This way the component is independent of the way we make API calls and deals only with the UI.

Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store's dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed.

To use Redux Thunk is a middleware we need to install the redux-thunk middleware npm package.

npm install --save redux-thunk