export const DEFAULT_APP_STATE = "Initial state";

export const appReducer = (state = { ...DEFAULT_APP_STATE }, action) => {

switch (action.type) {

case "update":

return action.payload;

default:

return action.payload;

  }

};

import React, { useEffect } from "react";

import { appReducer, DEFAULT_APP_STATE } from "./reducer/reducer";

import Event from "./event";

export default function Title() {

const [reducerState, dispatch] = React.useReducer(

appReducer,

DEFAULT_APP_STATE

  );

const [state, setState] = React.useState(reducerState);

useEffect(() => {

console.log("new state by Reducer", reducerState);

setState(reducerState);

  }, [reducerState]);

return <h1>Title state: {state}</h1>;

}

import React, { useEffect } from "react";

import { appReducer, DEFAULT_APP_STATE } from "./reducer/reducer";

import Event from "./event";

export default function Description() {

const [reducerState, dispatch] = React.useReducer(

appReducer,

" in description"

  );

const [state, setState] = React.useState(reducerState);

return (

<React.Fragment>

<p>Description State: {state}</p>

<p>

<button

onClick={() => {

const newState = "State updated by useReducer";

console.log(newState, reducerState);

setState(newState);

dispatch({

type: "update",

payload: newState,

            });

          }}

>

          Dispatch using Reducer

</button>

</p>

</React.Fragment>

  );

}