Designing Global State

Take a closer look at how data flows through various parts of the 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.

Get hands-on with 1200+ tech skills courses.