15.useReducer()Hook.md

Effortlessly Manage Complex State with useReducer in React"

useReducer hook in React. useReducer is a hook that allows you to manage state in a functional component. It is similar to the useState hook, but it is more powerful and can be more efficient in certain situations.

Here is an example of how useReducer works:

import { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}

In this example, we have defined a reducer function that takes in a state and an action, and returns a new state based on the action type. We have also defined an initial state for our component.

Next, we use the useReducer hook to create a state variable and a dispatch function. The dispatch function allows us to dispatch actions to the reducer, which will update the state based on the action type.

Finally, we render a counter that displays the current count and has buttons to increment and decrement the count. When the buttons are clicked, we dispatch an action to the reducer to update the state.

The third parameter of the useReducer hook is an optional argument that allows you to specify an initial state value that is different from the value specified in the reducer function.

For example:

import { useReducer } from "react";

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(
    reducer,
    initialState,
    (initialState) => ({
      ...initialState,
      count: initialState.count + 10,
    })
  );
  // ...
}

In this example, the initial state value for the count property is specified as 0 in the reducer function. However, we can use the third parameter of useReducer to specify a different initial value for the count property. In this case, we are using the third parameter to specify that the initial value for the count property should be 10, which is 10 more than the value specified in the reducer function.

The third parameter of useReducer is a function that takes in the initial state value specified in the reducer function and returns a new initial state value. This can be useful if you want to specify different initial values for different properties, or if you want to perform some other transformation on the initial state value.

Summary

• Same as the useState just only be used as an alternative for doing the complex logic states , when 2 or more useStates are related to one thing combine them into one useReducer() as an object .

• disptach() function takes the argument of ypdating state value as an object of the action.

• reducer function be called when we pass the action value to the dispatch function and this function takes the two parameter of the state which has the previous value and the action value.