tg-me.com/webdevcoursefree/1565
Last Update:
State Management: Redux, Vuex, and Context API
Now that you’ve learned how to connect the frontend with a backend using APIs, the next crucial concept is state management. When building modern web applications, handling data across multiple components can become complex. This is where state management tools like Redux, Vuex, and Context API help.
1. What is State Management?
State management refers to storing, updating, and sharing data between different parts of an application. Without proper state management, you might face issues like:
Prop drilling → Passing data through multiple levels of components.
Inconsistent UI updates → Different parts of the app showing outdated data.
Difficult debugging → Hard to track state changes in large apps.
State management solutions centralize the application's data, making it easier to manage and share across components.
2. Context API: Lightweight State Management in React
The Context API is a built-in feature in React that allows prop drilling elimination by making data available globally.
Example: Using Context API in React
1️⃣ Create a Context
import React, { createContext, useState } from "react";
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
export default ThemeContext;
2️⃣ Use Context in a Component
import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";
const ThemeSwitcher = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<div>
<h2>Current Theme: {theme}</h2>
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
Toggle Theme
</button>
</div>
);
};
export default ThemeSwitcher;
3️⃣ Wrap Your App with the Provider
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "./ThemeContext";
import ThemeSwitcher from "./ThemeSwitcher";
ReactDOM.render(
<ThemeProvider>
<ThemeSwitcher />
</ThemeProvider>,
document.getElementById("root")
);
✔ Pros: Simple, built-in, and great for small apps.
❌ Cons: Not optimized for frequent state updates in large applications.
3. Redux: Scalable State Management for React and Other Frameworks
Redux is a popular state management library that provides a centralized store for application data. It follows a strict data flow:
1️⃣ Actions → Describe changes (e.g., increment counter).
2️⃣ Reducers → Define how the state should change.
3️⃣ Store → Holds the global state.
4️⃣ Dispatch → Sends actions to update the state.
Example: Simple Counter Using Redux
1️⃣ Install Redux and React-Redux
npm install redux react-redux
2️⃣ Create a Redux Store
import { createStore } from "redux";
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return { count: state.count + 1 };
default:
return state;
}
};
const store = createStore(counterReducer);
export default store;
3️⃣ Provide the Store to the App
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import Counter from "./Counter";
ReactDOM.render(
<Provider store={store}>
<Counter />
</Provider>,
document.getElementById("root")
);
4️⃣ Use Redux in a Component
import React from "react";
import { useSelector, useDispatch } from "react-redux";
const Counter = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
</div>
);
};
export default Counter;
✔ Pros: Great for large applications, scalable, predictable state.
❌ Cons: Boilerplate-heavy, requires additional setup.
BY Web Development
Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283
Share with your friend now:
tg-me.com/webdevcoursefree/1565