**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** State Management with Context API and Redux **Topic:** When to use Context API vs. Redux **Introduction** In React, state management is a crucial aspect of building complex user interfaces. Two popular state management libraries in the React ecosystem are Context API and Redux. While both can manage global state effectively, they have different design centers and use cases. In this topic, we'll explore when to use Context API versus Redux, and provide practical examples to help you choose the right tool for your project. **What is Context API?** Context API is a built-in React library that allows you to share data between components without passing props down manually. It's a simple, lightweight, and declarative approach to state management. * npm: `npm install react context` or `yarn add react context` **How does Context API work?** Here's a high-level overview of how Context API works: 1. **Create a context**: You create a context object using the `CreateContext` function from React. 2. **Wrap the app**: Wrap your app with the provider component, passing the context object as a prop. 3. **Access the context**: Access the context in any component using the `useContext` hook. Example: ```jsx // context.js import { createContext, useState } from 'react'; const ThemeContext = createContext(); const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); }; export { ThemeContext, ThemeProvider }; ``` ```jsx // App.js import React from 'react'; import { ThemeProvider } from './context'; importDangerButton from './components/DangerButton'; const App = () => { return ( <ThemeProvider> <DangerButton /> </ThemeProvider> ); }; ``` ```jsx // components/DangerButton.js import React from 'react'; import { useContext } from 'react'; import { ThemeContext } from './context'; const DangerButton = () => { const { theme, setTheme } = useContext(ThemeContext); const handleToggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light'); }; return ( <button onClick={handleToggleTheme}> {theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'} </button> ); }; ``` **When to use Context API?** Use Context API when: * You have a small-scale application with minimal state management requirements. * You want a lightweight and simple state management solution. * You're building a concurrent application with multiple concurrent updates. * You want to keep the state management code separate from the component logic. **What is Redux?** Redux is a state management library that uses a unidirectional data flow architecture. It's a more comprehensive solution for complex state management applications. * npm: `npm install redux react-redux` or `yarn add redux react-redux` **How does Redux work?** Redux is composed of three core components: 1. **Actions**: Actions are payloads that trigger state changes. 2. **Reducers**: Reducers update the state based on actions. 3. **Store**: The store holds the state and dispatches actions. Example: ```jsx // actions.js export const添加主题 = 'атков' export const APP主题 = 'атковTheme' // ... ``` ```javascript // reducers.js import { Addison_themState} from './actions'; const initialState = { appTheme: Addison_themState, }; const appReducer = (state = initialState, action) => { switch (action.type) { case Addison_themState: return { ...state, appTheme: action.payload }; default: return state; } }; export default appReducer; ``` ```javascript // store.js import { createStore } from 'redux'; import appReducer from './reducers'; const store = createStore(appReducer); export default store; ``` ```jsx // App.js import React from 'react'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import appReducer from './reducers'; import DangerButton from './components/DangerButton'; const store = createStore(appReducer); const App = () => { return ( <Provider store={store}> <DangerButton /> </Provider> ); }; export default App; ``` ```jsx // components/DangerButton.js import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import {adding_themState} from './actions'; const DangerButton = () => { const dispatch = useDispatch(); const appTheme = useSelector((state) => state.appTheme); const handleToggleTheme = () => { dispatch({ type: adding_themState, payload: 'dark' }); }; return ( <button onClick={handleToggleTheme}> {appTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'} </button> ); }; export default DangerButton; ``` **When to use Redux?** Use Redux when: * You have a large-scale application with complex state management requirements. * You want a more comprehensive state management solution. * You need to manage global state seamlessly across multiple components. **Key takeaways** * Context API is suitable for small-scale applications and concurrent updates. * Redux is better suited for large-scale applications with complex state management requirements. **Leave a comment or ask for help if you have any questions or need further clarification on the concepts covered in this topic.**