Background

Yes, you can use the very cool Chrome extension Redux DevTools with React Hooks. You may have bumped into lots of articles that say one of the downsides of using React Hooks with useReduce and useState, instead of react-redux is that you loose the awesome development experience that comes with react-redux. Well, that’s just wrong. Using the npm package reinspect you can see state changes.

Below is a the JavaSript and you can find the full github repo with this example here:

github.com/pkellner/debug-react-hooks-with-redux-devtools

And the associated code is below. Notice how useState and useReducer are imported from reinspect and not react.

{% highlight javascript %} import React from “react”; import ReactDOM from “react-dom”;

import { StateInspector, useState, useReducer } from “reinspect”;

function CounterFunState() { const [sum1, setSum1] = useState(100, “Sum1State”); return ( <> {sum1} <button onClick={() => setSum1(sum1 + 1)}>Add 1 state  with useState </> ); }

function CounterFunReducer() { const reducer = (state) => { return state + 5; }; const [sum2, dispatch] = useReducer(reducer, 5000, “Sum2State”); return ( <> {sum2} <button onClick={() => dispatch({})}>Add 5 reducer  with useReducer </> ); }

function Counter() { return ( <>

StateInspector