triplebyte-react-spa/components/counter.js
2020-02-18 14:51:01 -05:00

36 lines
798 B
JavaScript

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
const useCounter = () => {
const count = useSelector(state => state.count)
const dispatch = useDispatch()
const increment = () =>
dispatch({
type: 'INCREMENT',
})
const decrement = () =>
dispatch({
type: 'DECREMENT',
})
const reset = () =>
dispatch({
type: 'RESET',
})
return { count, increment, decrement, reset }
}
const Counter = () => {
const { count, increment, decrement, reset } = useCounter()
return (
<div>
<h1>
Count: <span>{count}</span>
</h1>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
<button onClick={reset}>Reset</button>
</div>
)
}
export default Counter