Exercises: useReducer Hook - React In Depth

Let's go through some exercises on the useReducer hook in React together.

We start with a warmup to recap what a reducer function is in general, in the context of Array reduce.

Then we look at our first exercise where we create a Counter component where all the button actions are tied to a reducer.

For the second exercise, we recreate the counter from exercise 1, but with the added complexity of prop drilling to custom Button components instead.

To wrap up the video, we look at some ways we can use the useReducer hook to help manage form state in our applications.

Chapters:
00:00 Introduction
00:28 Warmup Exercise - Array Reduce
04:54 Exercise 1 - Counter Reducer
19:10 Exercise 2 - Dispatch Props
39:46 Exercise 3 - Form
1:11:01 Next Steps

[zaytungbonn]

thanks for video. I want to learn how can we clean input area after dispatch or on submit?

[brajagopalmukherjee]

Attendance count # 11 😅..Can u add typescript later ?after your lecture i feel like i know everything about react ♥️

[mayurPrmr]

Sir can u please make video on axios??

[alinanerlich]

Is there a technical reason to pass the dispatch function and action instead of just pass the function itself to the child component? What is more important - avoiding redundant code (here passing counterDispatch 3 times in each button) or to evaluate the dispatch in the child component where it belongs? I passed each button a different onClickFn, and I know you said there are many solutions, but I would like to know the best practice :)

[Abulkhair]

import React, { useReducer } from 'react'
function reducerFuction(previousState, action){
switch (action.type){
case 'up': return previousState + action.value;
case 'down': return previousState - action.value;
case 'reset': return 0;
}
}

function Component() {
let [state, dispatch] = useReducer(reducerFuction, 0)
function up(){
dispatch({type : 'up', value: 1})
}
function down(){
dispatch({type : 'down', value:1})
}
function reset(){
dispatch({type : 'reset'})
}
return (
<>

<h1>{state}</h1>
<button onClick={up}>Go Up</button>
<button onClick={down}>Go Down</button>
<button
</>
)
}

export default Component