iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Redux is a pattern and JavaScript library for managing shared application state. It gives an app one place to keep that state and a predictable update cycle: the UI dispatches an action, reducers calculate the next state, and the UI renders from the result. For modern React apps, the Redux maintainers recommend Redux Toolkit (RTK) for writing Redux logic and React-Redux for connecting components to the store.
What Is Redux?
Redux is both a state-management pattern and a JavaScript library. It is designed for state that needs to be shared across an application, rather than data used only by one component. Redux is independent of any particular UI framework, though React is its most common pairing in the official documentation.
Its core pieces have distinct jobs:
- Store: holds the application’s shared state and coordinates updates.
- Action: describes an event or something that happened. It does not calculate the state change.
- Reducer: receives the current state and an action, then calculates the next state.
The basic data flow is:
- The UI renders using the current state.
- A user interaction or other event causes the UI to dispatch an action.
- The store runs the relevant reducer logic to calculate updated state.
- The store notifies its subscribers that state has changed.
- The UI reads the new state and renders again.
This one-way flow makes state changes easier to trace: the action records what happened, while the reducer determines how the application responds.
Free tools Windows power users keep installed
One-click scans. No signup required.
Why Should I Use Redux?
Redux can make shared state and its update rules easier to understand as an application grows. Instead of coordinating changes across many components, the app can keep shared data in one store and express changes through actions and reducers. That structure also makes updates more visible and can make behavior easier to test.
#1 Best Overall
Redux is not free of trade-offs. It introduces concepts, indirection, constraints, and code that a small application may not need. The decision is a balance between keeping a simple app simple and creating a consistent structure for state that is widely shared or difficult to coordinate.
When Should I Use Redux?
Redux is a stronger fit when several parts of an app need the same state, changes happen frequently, update logic is complex, or a medium-to-large codebase is maintained by multiple developers. Its predictable structure can help teams see when, where, and why changes occur.
Keep state local when it only matters to one component. For example, whether a dropdown is open usually does not need to live in a global store if no other part of the application uses that information. Put shared application state in Redux when the need to coordinate it justifies the extra structure.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Rank #2
- State shared widely: Redux may be useful when unrelated screens or components depend on the same data.
- Frequent or complex changes: Actions and reducers provide a defined place to describe and calculate updates.
- Team consistency: A common state model can help multiple developers work within the same conventions.
- Local, simple state: Keep it in the component when broader sharing or coordination is unnecessary.
The official Redux guidance emphasizes that not every app needs Redux. Its value depends on the app’s sharing needs, update complexity, and maintainability requirements—not on an assumption that global state is always better.
How Does Modern Redux Architecture Work?
The recommended approach for new Redux logic is Redux Toolkit, which packages common Redux patterns into a more direct workflow. In a React application, React-Redux supplies the official bindings that let components access the store.
| Part | Typical responsibility |
|---|---|
app/store |
Creates the store with RTK’s configureStore and combines feature reducers. |
features/<feature>/<feature>Slice |
Defines a feature’s state, reducer logic, and generated action creators with createSlice. |
| Feature and UI components | Read data with useSelector and dispatch actions with useDispatch. |
| Async logic | Uses thunks when logic needs dispatch or getState; RTK Query is the documented option for API fetching and caching. |
| React app root | Wraps the component tree in <Provider store={store}> so components can access the store. |
A slice is a feature-oriented collection of reducer logic and related actions, generally defined together. The slice reducer becomes one branch of the root state when registered with the store. The keys passed to the store determine those branch names.
For example, a blogging application might have users, posts, and comments slices. Each reducer handles its own feature branch, while components can select the parts of the state they need.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What ConfigureStore and CreateSlice Provide
RTK’s configureStore accepts an options object and can combine reducers when they are passed as an object. It adds thunk middleware, enables Redux DevTools Extension integration, and includes development-only immutability and serializability checks.
createSlice creates reducer logic and corresponding action creators together. It uses Immer, which allows reducer code to use mutation-like syntax while still producing immutable state updates. Reducers should remain focused on calculating state from the current state and action; they should not perform asynchronous work or other side effects.
Rank #4
Where Async Work Belongs
Use a thunk for asynchronous logic that needs access to dispatch or getState. For server data fetching and caching, the official Redux tutorial points readers to RTK Query. In either case, keep side effects out of reducers so reducer calculations remain predictable.
What Does a Small Redux Example Look Like?
A counter is a useful first illustration because it makes the parts easy to see. It is intentionally simpler than the state coordination found in a real application.
Recommended Free Tools
import { configureStore, createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
incremented(state) {
state.value += 1
},
},
})
const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
})
store.dispatch(counterSlice.actions.incremented())The slice defines the counter’s initial state and update rule, and generates the incremented action creator. The store registers the reducer under the counter key, so the counter is available at state.counter. Dispatching the generated action asks Redux to run the reducer and calculate the next state. In a React app, a component would use React-Redux hooks to select the value and dispatch the action in response to an event.
Best Value
How Should I Learn Redux?
The official learning path is organized around two complementary tutorials. Redux Essentials teaches the current recommended Redux Toolkit approach, React-Redux hooks, and RTK Query. Redux Fundamentals explains lower-level mechanics and why the abstractions exist. The maintainers recommend starting with Essentials if you are building an app, then using Fundamentals to deepen your understanding.
The tutorials assume familiarity with JavaScript and React terminology; Essentials also lists basic TypeScript and asynchronous JavaScript knowledge as prerequisites. See the Redux Essentials overview and the official tutorial index.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
