Redux organizes application state around three core principles: a single store holding the entire application's state as one object tree, state that's only ever changed by dispatching a plain action object describing what happened, and pure reducer functions that take the current state and an action and return a new state, never mutating the original. Paired with the react-redux library, components can read from the store using the useSelector hook and dispatch actions using the useDispatch hook, keeping the actual Redux logic decoupled from any specific component.
1Understanding Redux
Redux organizes application state around three core principles: a single store holding the entire application's state as one object tree, state that's only ever changed by dispatching a plain action object describing what happened, and pure reducer functions that take the current state and an action and return a new state, never mutating the original. Paired with the react-redux library, components can read from the store using the useSelector hook and dispatch actions using the useDispatch hook, keeping the actual Redux logic decoupled from any specific component.
Redux enforces a strict, predictable update pattern, every state change goes through a dispatched action and a pure reducer, which is exactly what enables powerful developer tools like time-travel debugging, at the cost of noticeably more boilerplate than simpler alternatives like plain Context for smaller applications.
# Terminal
npm install redux react-redux @reduxjs/toolkit2Practical Example
Here is a real-world application of Redux showing how it is used in production React code.
import { Provider } from 'react-redux';
import { store } from './store';
function App() {
return (
<Provider store={store}>
<MyComponents />
</Provider>
);
}3Best Practices
Follow these guidelines when working with Redux:
1. Reach for Redux specifically when an application has substantial, frequently-updating shared state across many unrelated components, along with a real need for tooling like time-travel debugging
2. Keep reducers pure, computing a new state object based only on the current state and the action, with no side effects or mutations of the existing state
3. Use react-redux's useSelector and useDispatch hooks inside components to read from and update the store, rather than importing the store instance directly wherever needed
Tip: Redux enforces a strict, predictable update pattern, every state change goes through a dispatched action and a pure reducer, which is exactly what enables powerful developer tools like time-travel debugging, at the cost of noticeably more boilerplate than simpler alternatives like plain Context for smaller applications.
# Terminal
npm install redux react-redux @reduxjs/toolkit