Designing Global State

Flow Diagram

The following diagram depicts how a view component can use and update the global state:

• Generate a global state object and dispatch function using useReducer hook. If you would like a refresher on it, please follow the lesson React Hook with Reducer Pattern.

• Store is a React Context object that provides access to the global state and the dispatch function provided by the useReducer hook.

• Action creator is a JavaScript function to return a new action. Actions are simply a JavaScript object with an action type associated with it.

• Views can get access to the global state using the Store. Views can also update the state in Store by dispatching actions.