Redux Intro
Overview
While the Context API is great for low-frequency updates (like light/dark mode), it is not a dedicated state management tool. It has no built-in way to debug state changes, and updates force the entire consuming tree to re-render.
For massive enterprise applications with rapidly changing data (like a trading dashboard or Facebook's newsfeed), the industry historically standardized on Redux (and its modern incarnation: Redux Toolkit (RTK)).
Redux moves ALL of your global state into a single, massive, centralized JavaScript object called the Store. Components do not modify the store directly. Instead, they dispatch Actions (just like useReducer). These actions are processed by Reducers, which calculate the new state.
Crucially, components use a hook called useSelector to subscribe to very specific slivers of the store (e.g., state.user.email). If state.cart updates, the user component does NOT re-render. This granular subscription model provides unmatched performance at scale.
Syntax
import { createSlice } from '@reduxjs/toolkit';
import { useSelector, useDispatch } from 'react-redux';
// 1. Defining a 'Slice' of the global store (RTK handles immutability automatically via Immer!)
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; } // Mutating syntax is allowed here!
}
});
export const { increment } = counterSlice.actions;
// 2. Using Redux in a Component
function CounterApp() {
const dispatch = useDispatch();
// 3. Granular subscription: Component only re-renders if 'value' changes
const count = useSelector((state) => state.counter.value);
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Add</button>
</div>
);
}Common Pitfalls
- Over-engineering with Redux: Redux requires setting up a Store, Slices, Providers, Dispatchers, and Selectors. For a small or medium app, this is massive overkill and vastly reduces development speed. Do not use Redux unless your app genuinely requires complex, high-frequency, heavily shared global state.
Interview Questions
Legacy Redux required massive amounts of boilerplate: creating action types, action creators, switch-statement reducers, and manually handling immutable object spreads. RTK is the modern, official way to write Redux. It wraps all of this boilerplate into createSlice and uses Immer under the hood so developers can write simple, mutating code that automatically compiles into safe immutable updates.
Context API re-renders EVERY component that calls useContext whenever the Provider's value changes, regardless of whether the component actually needed the specific property that changed. Redux's useSelector hook isolates re-renders. A component will ONLY re-render if the specific returned value of its selector function changes.
Real-World Example
Redux DevTools Extension: The true power of Redux in enterprise teams is debuggability. Every action dispatched is recorded in the browser extension. You can literally click a button to 'rewind' the state of your application back in time to see exactly how the UI looked before an error occurred.
// Redux is famous for its incredible browser extension
// It provides "Time Travel Debugging"
// ACTION HISTORY:
// 10:01 - USER_LOGIN
// 10:02 - ADD_ITEM_TO_CART (ID: 55)
// 10:03 - ADD_ITEM_TO_CART (ID: 12)
// 10:05 - CHECKOUT_START
// 10:05 - CHECKOUT_ERROR (Network Timeout)Check Your Knowledge
Test your understanding of Redux Intro with these quick questions.