Easy Explanation Of USE REDUCER Hook

·

2 min read

If you are familiar with Use State Hook then use Reducer Hook will be a child Play For you.

As we all know useState is simply updating our state, in the same way, useReducer is also manages our state or we can say that it can manage a more complex state.

Let's Go and see side by side comparison of Use State and Use Reducer Hook

some similarities between these two hooks

useState 🔴IMPORTANT❗🔴UseReducer🔥Cool🔥
[state,setUpdateState=usestate()][state,dispatch]=useReducer()
here state is used in our component to render outputhere also state is used in our
component to render output
setUpdateState is used to update the statedispatch is used to update the state
useState takes initialState as an inputuseReducer takes 2 input
1- ReducerFunction
2- initialState

UseReducerHook

Here is a simple counter app using UseReducer hook

Here are some 6 steps that you should follow to use UseReduceHook

  1. Import it from react
    import { useReducer } from "react";
  2. use your useReducerHook
    const [state, dispatch] = useReducer(reducerFunction, initialState);
  3. Define your initial state const initialState = { count: 0 };
4. Define Your reducerFunction so that you can pass it in your useRducerHook
```
 const reducerFunction = (state, action) => {
    switch (action.type) {
      case "increment":
        return {
          ...state,
          count: state.count + 1
        };
      case "decrement":
        return {
          ...state,
          count: state.count - 1
        };

      default:
        return state;
    }
  };

```

5-> For increment or Decrement value Onclick use Your dispatch method

```
<button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
```

6-> To use state in your component use your state ```

      <h3>value:{state.count}</h3>
``

Conclusion

follow above 6 steps to use USEREDUCER HOOK