Using reducer actions

A reducer function in a React application is a function that takes the current state, an action, and any other arguments that are needed to update the state. It returns the new state of the component. The action argument tells the reducer function what new state to return and is often used in a switch statement. Let's look at an example now:

import React, { Fragment, useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'changeName':
      return { ...state, name: action.value };
    case 'changeAge':
      return { ...state, age: action.value };
    default:
      throw new Error(`${action.type} is not a valid action`);
  }
}

export default function App() {
  const [{ name, age }, dispatch] = useReducer(reducer, {});

  return (
    <Fragment>
      <input
        placeholder="Name"
        value={name}
        onChange={e => dispatch({ type: 'changeName', value: e.target.value...