Project shows: The useReducer hook is used for the first time, along with the useContext hook. useReducer is very similar to useState, but it lets you move the state update logic from event handlers (useEffect) into a single function outside of your component.

–  Initially the

   function QuizProvider({ children}) {

defines:

 const [ { variables… }, dispatch, ] = useReducer(reducer, initialState);

The reducer uses the:

   const initialState = {
questions: [],
// ‘loading’, ‘error’, ‘ready’, ‘active’, ‘finished’
status: “loading”,
index: 0,
answer: null,
points: 0,
highscore: 0,
secondsRemaining: null,
};

to initialize the state object. Any state update logic is performed inside the:

The reducer method is called through the dispatch method.

As an example, after the state is initialized in the useReducer definition, the quiz questions are loaded into the state object by:

 useEffect(function () {
dispatch({ type: “dataReceived”, payload: testQuestions });
}, []);

which is called when the <QuizProvider> mounts.

The dispatch is called by each component when necessary. As an example, the <StartScreen /> component will call the dispatch reducer method when its button is clicked on:

 function StartScreen() {
const { numQuestions, dispatch } = useQuiz();

  return (
<div className=”start”>
<h2>Welcome to The React Quiz!</h2>
<h3>{numQuestions} questions to test your React mastery</h3>
<button className=”btn btn-ui” onClick={() => dispatch({ type: “start” })}>
Let’s start
</button>
</div>
);
}

and the reducer acts on the “start” action as: