---
title: "Use React's Reducer hook to build thunk creators & redux dev tools."
description: "Level up your Redux skills! Integrate Thunks & DevTools with React's useReducer hook for efficient state management."
author: "Nishan Bende"
category: "Engineering"
published: "2019-05-08"
reading_time: "3 min read"
canonical: "https://www.solutelabs.com/blog/configuring-thunk-action-creators-and-redux-dev-tools-with-reacts-use-reducer-hook"
---

# Use React's Reducer hook to build thunk creators & redux dev tools.

When does someone choose to put a state in redux?

1. To avoid props drilling.
2. To use the redux state as a cache between mount/unmount.
3. To avoid refactoring at a later stage when a new component asks for the same state.
4. Some folks dislike the idea to keep API calls inside the component.
5. Awesome debugging tool. At least here you can time travel.

There could be more than 5 points, but these are the ones I found most essential.

![No spoilers ahead :D](https://cdn.sanity.io/images/0mnqm898/production/43377de44101216561d36fdf839de22853c48d9c-500x211.gif?w=1200&q=90)

BUT, when you don’t need 1, 2 and 3 it creates a very small and familiar problem.

**My favorite one:**

> Why are the filters not resetting when I move out of the screen.

```text
componentWillUnmount() {
dispatch({type: "RESET"});
}
```

What if we can keep the state in component and still get 3, 4 and 5. :D

Solving 4 will automatically solve 3 as long as you are using React redux [thunk](https://daveceddia.com/what-is-a-thunk/).

> First, let’s get the 4th i.e. Async actions.

## 1. Creating a custom React useReducer hook.

```text
import { useReducer } from 'react'function useReducerWithThunk(reducer, initialState) {
const[state, dispatch]=useReducer(reducer,initialState);letcustomDispatch=(action)=>{
if (typeofaction==='function') {
action(customDispatch);
} else {
dispatch(action);
}
};return [state, customDispatch];
}
```

## 2. Using the above useReducer hook.

```text
import useReducerWithThunk from "./useReducerWithThunk";// Async action creator
const fetchData = () => async (dispatch) => {
dispatch({ type:"FETCH" });
}export default function App() {
const[count, dispatch]=useReducerWithThunk(reducer,0);

function fetchData() {
dispatch(fetchData());
}

return <button onClick={fetchData}>Get Data!</button>
}
```

Done, that’s all you need to dispatch a function instead of an object. :D

> Now, let’s knock down the 5th i.e Awesome Redux Devtools support.

### Before that, we need to consider the below points.

- Devtools should support redux’s store along with React userReducer’s.
- The useReducer is completely isolated and we can’t combine them to create a rootReducer which is what we are trying to avoid.
- But, we can create a separate store for each useReducer in dev-tools and switch between them using the dropdown below.

![Select instances](https://cdn.sanity.io/images/0mnqm898/production/09a879abf1e68ddc1ab1cb1593f2132b584d3b57-712x205.png?w=1200&q=90)

## Implementation:

Devtools will only initialize if the name parameter is passed. See below.

## Usage:

The above useReducer — React redux hook can be used as below.

```text
const[count, dispatch]= useReducerWithThunk(reducer,0, name // optional);
```

## Result:

Here, a separate instance is created which can be switched using the dropdown.

![Fully functional redux dev tools using useReducer](https://cdn.sanity.io/images/0mnqm898/production/99e3f301841d03613fcedb420c13337c5f518c3f-1229x691.png?w=1200&q=90)

### End Notes:

It would be much better if only a few complicated reducers are connected to Redux devtools or else the overhead involved in switching and finding the appropriate instance will exceed the benefits.

But at least the reason of not able to use devtools should not prevent you from keeping the state local.

Thanks for taking the time to read this, I hope you find it useful.

[Sunny-Nishan/use-reducer-thunk ](https://github.com/intergalacticspacehighway/use-reducer-thunk) — Thunk like action creator support for react’s useReducer hook — Sunny-Nishan/use-reducer-thunk 

#### Reference:

[Redux DevTools without Redux ](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f) — Note that window.devToolsExtension has been renamed to window.__REDUX_DEVTOOLS_EXTENSION__.

[Application State Management with React ](https://kentcdodds.com/blog/application-state-management-with-react) — Managing state is arguably the hardest part of any application. It’s why there are so many state management libraries…