As React developers, we often find ourselves dealing with the state of our applications, especially when multiple components need to share and manage that state. While the traditional useState hook is great for local state, it may fall short when we need a more complex state management solution. In this article, we\u2019ll explore how to integrate the Context API<\/strong> with the useReducer<\/strong> hook to manage your React application\u2019s global state efficiently.<\/p>\n The Context API provides a way to share values between components without having to pass props explicitly at every level of the tree. This feature is particularly useful when working with a large application where various components might need access to the same state or functions.<\/p>\n The useReducer<\/strong> hook is an alternative to useState for managing complex state logic in React. It\u2019s particularly beneficial when dealing with state that depends on previous state values or when the state logic is complex, as it allows you to centralize state updates in a reducer function. Think of it as a more structured way of managing state, similar to Redux but integrated directly into React.<\/p>\n To illustrate how to use the Context API with useReducer, let\u2019s create a simple counter application. This application will allow users to increase or decrease a counter value, and the state management will be centralized using the Context API and useReducer.<\/p>\n If you haven\u2019t already, create a new React application using Create React App:<\/p>\n Navigate to your project folder:<\/p>\n Create a new file called CounterContext.js<\/strong> in the src<\/strong> directory. This file will define our context and upstream state logic.<\/p>\n In this code, we defined:<\/p>\n Next, we need to wrap our React application with the CounterProvider<\/strong> in the index.js<\/strong> file:<\/p>\n Now, let\u2019s create a component that will display our counter and provide buttons to modify it. Create a new file called Counter.js<\/strong> in the src<\/strong> directory.<\/p>\nWhat is the Context API?<\/h2>\n
Why use useReducer?<\/h2>\n
Setting Up a Simple Application<\/h2>\n
Step 1: Create a New React App<\/h3>\n
npx create-react-app context-useReducer-demo<\/code><\/pre>\ncd context-useReducer-demo<\/code><\/pre>\nStep 2: Create the Context and Reducer<\/h3>\n
import React, { createContext, useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nconst CounterContext = createContext(initialState);\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 };\n case 'DECREMENT':\n return { count: state.count - 1 };\n default:\n throw new Error(`Unknown action: ${action.type}`);\n }\n};\n\nconst CounterProvider = ({ children }) => {\n const [state, dispatch] = useReducer(reducer, initialState);\n \n return (\n \n {children}\n \n );\n};\n\nexport { CounterProvider, CounterContext }; \n<\/code><\/pre>\n\n
Step 3: Wrap Your Application with CounterProvider<\/h3>\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport App from '.\/App';\nimport { CounterProvider } from '.\/CounterContext';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);\n<\/code><\/pre>\nStep 4: Create the Counter Component<\/h3>\n
import React, { useContext } from 'react';\nimport { CounterContext } from '.\/CounterContext';\n\nconst Counter = () => {\n const { state, dispatch } = useContext(CounterContext);\n \n return (\n Counter: {state.count}<\/h1>\n