react hook usereducers code example
Example: react reducer hooks
import React from "react";
const initialState = {counter: 0};
const INC = 'INCREMENT';
const DEC = 'DECREMENT';
function incActionCreator() {
return {
type: INC,
}
}
function decActionCreator() {
return {
type: DEC,
}
}
function hooksReducer(state, action) {
switch(action.type) {
case 'INCREMENT':
return {
...state,
counter: state.counter++
}
case 'DECREMENT':
return {
...state,
counter: state.counter--
}
default:
return state;
}
}
function App () {
const [stateAction, setDispatchAction] = React.useReducer(hooksReducer, initialState);
const incClick = (e) => setDispatchAction(incActionCreator())
const decClick = (e) => setDispatchAction(decActionCreator())
return (
<>
<button onClick={incClick}>Incerement</button>
<button onClick={decClick}>Decrement</button>
<h4>Counter: {stateAction.counter}</h4>
</>
);
}
export default App;