Easy Explanation Of USE REDUCER Hook

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

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