**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** TypeScript with React **Topic:** Managing context and global state in React **Overview** In the previous topics, we have learned how to set up a React project with TypeScript, create functional components and hooks, and perform type checking on props and state in React components. In this topic, we will explore how to manage context and global state in React applications using TypeScript. **What is Global State?** Global state, also known as application state, refers to the state that is shared across multiple components in a React application. It can include things like user authentication data, theme settings, or API data. Managing global state in a React application can be challenging, especially when dealing with complex, stateful applications. **Understanding React Context API** React Context API is a built-in API in React that provides a way to manage global state in a React application. It allows you to share data between components without passing props down manually. Here's a simple example of how to use React Context API to manage global state: ```typescript import React, { createContext, useState } from 'react'; // Create a new context const ThemeContext = createContext(); // Create a provider component const ThemeProvider: React.FC = ({ children }) => { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); }; // Consume the context in a child component const Button: React.FC = () => { const { theme } = useContext(ThemeContext); return <button style={{ backgroundColor: theme === 'light' ? 'white' : 'black' }}>Click me</button>; }; ``` In this example, we create a `ThemeContext` using the `createContext` function from React. We then create a `ThemeProvider` component that wraps our application and provides the `theme` state to all its child components using the `Provider` component. **Using useReducer with React Context API** In more complex applications, you might want to manage global state with a more robust state management solution like `useReducer`. Here's an example of how to use `useReducer` with React Context API: ```typescript import React, { createContext, useReducer } from 'react'; // Define the initial state const initialState = { theme: 'light', }; // Define the reducer function const reducer = (state: any, action: any) => { switch (action.type) { case 'SET_THEME': return { ...state, theme: action.payload }; default: return state; } }; // Create a new context const ThemeContext = createContext(); // Create a provider component const ThemeProvider: React.FC = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <ThemeContext.Provider value={{ state, dispatch }}> {children} </ThemeContext.Provider> ); }; // Consume the context in a child component const Button: React.FC = () => { const { state, dispatch } = useContext(ThemeContext); return ( <button style={{ backgroundColor: state.theme === 'light' ? 'white' : 'black' }} onClick={() => dispatch({ type: 'SET_THEME', payload: 'dark' })} > Click me </button> ); }; ``` In this example, we define an `initialState` object that represents the initial state of our application. We then define a `reducer` function that updates the state based on the action type. **Managing Global State with a Third-Party Library** While React Context API is a powerful tool for managing global state, there are also third-party libraries available that can simplify the process. Some popular libraries include: * Redux * MobX * React Query For more information on these libraries, please refer to their respective documentation: * [Redux](https://redux.js.org/) * [MobX](https://mobx.js.org/) * [React Query](https://react-query.tanstack.com/) **Conclusion** Managing global state in React applications can be challenging, but there are many tools and libraries available to simplify the process. In this topic, we have learned how to use React Context API to manage global state, as well as how to use a third-party library like Redux to manage global state. **Practical Exercise** 1. Create a new React project using TypeScript and set up a global state management system using React Context API. 2. Create a provider component that wraps your application and provides the global state to all its child components. 3. Consume the context in a child component and display the global state. 4. Use a third-party library like Redux to manage global state in your application. **Leave a Comment/Ask for Help** If you have any questions or need help with the practical exercise, please leave a comment below. We'll be happy to help.