The Role of State Management in React: A Guide to Redux, Context API, and More

import React, { useState } from 'react';  

function Counter() {  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <p>Count: {count}</p>  
      <button onClick={() => setCount(count + 1)}>Increment</button>  
    </div>  
  );  
}  

import React, { useReducer } from 'react';  

const reducer = (state, action) => {  
  switch (action.type) {  
    case 'increment':  
      return { count: state.count + 1 };  
    case 'decrement':  
      return { count: state.count - 1 };  
    default:  
      return state;  
  }  
};  

function Counter() {  
  const [state, dispatch] = useReducer(reducer, { count: 0 });  

  return (  
    <div>  
      <p>Count: {state.count}</p>  
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>  
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>  
    </div>  
  );  
}  

import React, { createContext, useContext, useState } from 'react';  

const ThemeContext = createContext();  

function App() {  
  const [theme, setTheme] = useState('light');  

  return (  
    <ThemeContext.Provider value={{ theme, setTheme }}>  
      <Header />  
    </ThemeContext.Provider>  
  );  
}  

function Header() {  
  const { theme, setTheme } = useContext(ThemeContext);  

  return (  
    <div>



<p>While powerful, the Context API may not be the best choice for highly dynamic or large-scale applications due to performance concerns.</p>

<p><strong>Redux: A Popular State Management Library</strong></p>

<p><strong>What is Redux?</strong><br>
Redux is a predictable state management library that helps manage global state. It uses a single store for the entire application and updates state via actions and reducers, ensuring a predictable state flow.</p>

<p><strong>Key Concepts in Redux</strong></p>

<ul>
<li>Store: Centralized state container.</li>
<li>Actions: Objects describing state changes.</li>
<li>Reducers: Pure functions that specify how the state changes.</li>
<li>Middleware: Handles side effects like API calls.</li>
</ul>

<p>Example: Simple Redux Flow<br>
</p>

<pre class="brush:php;toolbar:false">import { createStore } from 'redux';  

// Reducer  
const counterReducer = (state = { count: 0 }, action) => {  
  switch (action.type) {  
    case 'increment':  
      return { count: state.count + 1 };  
    case 'decrement':  
      return { count: state.count - 1 };  
    default:  
      return state;  
  }  
};  

// Store  
const store = createStore(counterReducer);  

// Dispatch Actions  
store.dispatch({ type: 'increment' });  
console.log(store.getState()); // { count: 1 }