React Js The useReducer

The reducer in 'useReducer' comes from Redux, which in turn borrowed it from JavaScript's Array. The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element.

The useReducer hook takes three arguments including reducer, initial state, and the function to load the initial state.

The reducer function contains your custom state logic and the initialStatecan be a simple value but generally will contain an object.

The useReducer Hook returns the current stateand a dispatchmethod.

Syntax of useReducer :-

const [state, dispatch] = useReducer(reducer, initialArgs, init); (or)
 const [count, dispatch] = useReducer(reducer, initialState);

Here reducer is the user-defined function that pairs the current state with the dispatch method to handle the state, initialArgs refers to the initial arguments and init is the function to initialize the state lazily.

Example:-

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: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Initial state

For example, in the case of a counter state, the initial value

// initial state
const initialState = { 
  counter: 0 
};

Action object

An action object is an object that describes how to update the state. Typically, the action object would have a property type — a string describing what kind of state update the reducer must do

For example, an action object to increase the counter can look as follows

const action = {
  type: 'increase'
};

Dispatch function

The dispatch is a special function that dispatches an action object. Whenever you want to update the state , you simply call the dispatch function with the appropriate action object: dispatch(actionObject)

const [state, dispatch] = useReducer(reducer, initialState);

The dispatch function accepts an object that represents the type of action we want to execute when it is called. Basically, it sends the type of action to the reducer function to perform its job, which, of course, is updating the state.

The action to be executed is specified in our reducer function, which in turn, is passed to the useReducer. The reducer function will then return the updated state.

The actions that will be dispatched by our components should always be represented as one object with the type and payload key, where type stands as the identifier of the dispatched action and payload is the piece of information that this action will add to the state.

Reducer function

The reducer is a pure function that accepts 2 parameters: the current state and an action object. Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state.

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();
  }

This is it, we have successfully set up the basic usage of the useReducer.

But this is not all, there are more features and advantages that can be implemented for better functioning of an App. To find out more you can check out the official https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started. Till then keep exploring.