dispatching in 2 ways 1.directly and 2 with function
++++++++++
import { useReducer,React } from 'react';
import './App.css';
const incReducer=(state,action)=>{
if(action.type==="dec"){
return {"val":state.val-1};
}if(action.type==="inc"){
return {"val":state.val+1};
}
}
function App() {
const [state,dispatch]=useReducer(incReducer,{"val":0});
const ipchangeHandler=(ty)=>{
dispatch({"type":ty})
}
return (
<div>
<button type='button' onClick={(event)=>ipchangeHandler('dec',event.target.value)}>Decrement</button>
{state.val}
<button type='button' onClick={()=>dispatch({"type":"inc"})}>Increment</button>
</div>
);
}
export default App;
=====================================
type 1 passing dispatch
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
<button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
</div>type 2 passing dispatch through function
<div>
<button type='button' onClick={(event)=>ipchangeHandler('dec',event.target.value)}>Decrement</button>
{state.val}
<button type='button' onClick={(event)=>ipchangeHandler('inc',event.target.value)}>Increment</button>
</div>
const [state,dispatch]=useReducer(incReducer,{"val":0});
const ipchangeHandler=(ty)=>{
dispatch({"type":ty})
}
const incReducer=(state,action)=>{
if(action.type==="dec"){
return {"val":state.val-1};
}if(action.type==="inc"){
return {"val":state.val+1};
}
}
