Use React hooks with Redux DevTools Extension.
Hooks are an up coming feature of React. For more information see Introducing Hooks.
npm install use-devtools-hook
or
yarn add use-devtools-hook
Redux DevTools Extension must be installed and window.__USE_DEVTOOLS__ = true
must be in your app. Preferable at the root.
useReducerDevtools is for using devtools with the useReducer hook.
It takes the result from useReducer, an initial state and an instance name as arguments.
useStateDevtools is for using devtools with the useState hook. useStateDevtools takes the result from useState, an initial state and an instance name as arguments.
const stateReducer = useReducer(reducer, initialState)
const countState = useState(initialState)
const [state, dispatch] = useReducerDevtools(
stateReducer,
initialState,
'TODO'
)
const [count, setCount] = useStateDevtools(countState, initialState, 'COUNT')
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { useStateDevtools } from './use-devtools'
window.__USE_DEVTOOLS__ = true
export default function App() {
const initialState = 0
const countState = useState(initialState)
const [count, setCount] = useStateDevtools(countState, initialState, 'COUNT')
function handleDecrement(e) {
e.preventDefault()
setCount(count - 1)
}
function handleIncrement(e) {
e.preventDefault()
setCount(count + 1)
}
return (
<div>
<div>
Count is {count} <button onClick={handleDecrement}> - </button>
<button onClick={handleIncrement}>+</button>
</div>
</div>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
For a full example with useReducer see Todos example
MIT