Guide · Open source
How to use Redux: install, store, actions and reducers
Updated · written with AI from the project's own documentation and checked against our catalogue data
Redux is an open-source JavaScript library (MIT licensed, written in TypeScript) for managing global state, the data that many parts of an app need to share. This guide explains how it works, how to install it, and how to write a small example. By the end you will know the store, action and reducer pattern and when Redux is worth using.
Reduxreduxjs/redux · ★ 61.4k · MIT Install options & downloads Quick start
- 1Install the packages. Run npm install @reduxjs/toolkit react-redux in your project, or npm install redux for the core library alone.
- 2Create a slice. Use createSlice with a name, an initialState and a set of reducers. Export the generated actions.
- 3Configure the store. Pass your slice reducer to configureStore to create the store.
- 4Subscribe to changes. Use store.subscribe if you want a function to run after each state change.
- 5Dispatch actions. Call store.dispatch with an action created from your slice to update the state.
- 6Read the docs. Continue with the Redux Essentials tutorial at redux.js.org for more complete patterns.
What Redux does and how its core works
The whole global state of your app is stored in a single object tree inside one store. The only way to change that state is to create an action, an object describing what happened, and dispatch it to the store.
A reducer is a pure function that takes the old state and an action and calculates the new state. Because reducers are pure, state changes follow a consistent, testable pattern.
- Store: holds the single state tree
- Action: a plain object describing what happened
- Dispatch: sends an action to the store
- Reducer: a pure function that returns the next state
Install Redux or Redux Toolkit with npm
Redux is installed with a package manager. The README lists Node.js as the prerequisite and does not specify a version, so check the Installation docs for details. The README recommends Redux Toolkit for most Redux code, and it includes React-Redux for React apps.
For the Redux core by itself, install the redux package. For Redux Toolkit with React-Redux, install both packages together.
npm install redux
npm install @reduxjs/toolkit react-reduxStart from a template for React or React Native
The README says the recommended way to start a new React and Redux Toolkit app is the official Vite template or the Next.js with-redux example. Both come with Redux Toolkit and React-Redux already configured and a small example app.
For React Native, the README links an official Redux and TypeScript template for Expo.
npx tiged reduxjs/redux-templates/packages/vite-template-redux my-app
npx create-next-app --example with-redux my-app
npx tiged reduxjs/redux-templates/packages/expo-template-redux-typescript my-appWrite a counter with Redux Toolkit
Redux Toolkit's createSlice and configureStore functions simplify writing reducers and setting up the store. Inside a reducer you can write code that looks like mutation; Redux Toolkit uses the Immer library to turn those changes into a new immutable state.
Dispatching an action returns the updated state, and store.subscribe lets you listen for changes.
- createSlice defines the state, reducers and generates action creators
- configureStore creates the store from the reducer
- store.subscribe runs a function after every state change
import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
incremented: state => { state.value += 1 },
decremented: state => { state.value -= 1 }
}
})
export const { incremented, decremented } = counterSlice.actions
const store = configureStore({ reducer: counterSlice.reducer })
store.subscribe(() => console.log(store.getState()))
store.dispatch(incremented())
store.dispatch(incremented())
store.dispatch(decremented())Decide whether you need Redux at all
The README suggests Redux makes sense when you have reasonable amounts of data changing over time, need a single source of truth, or find that keeping state in a top-level component is no longer enough. It also says these guidelines are subjective, and that the point to adopt Redux differs for every app.
It recommends reading the linked articles, such as You Might Not Need Redux, before adopting it. Small apps with little shared state, or apps that only need local component state, may not need it.
- Good fit: many components share the same data and state changes need to be consistent and testable
- Probably unnecessary: small apps with little shared state or only local component state
Where to learn more
The Redux Essentials tutorial is a top-down introduction that the README recommends starting with. The Redux Fundamentals tutorial is a bottom-up guide that explains how Redux works from first principles. The Redux Toolkit docs cover its APIs at redux-toolkit.js.org.
Questions can be asked in the #redux channel of the Reactiflux Discord community.
What people use it for
- Sharing a logged-in user or settings object across many React components
- Keeping a shopping cart or form state consistent across pages in a larger front-end app
- Writing tests for state changes because reducers are pure functions
- Debugging state changes step by step with Redux DevTools
Frequently asked questions
How do I install Redux?
Run npm install redux for the core library, or npm install @reduxjs/toolkit react-redux to use Redux Toolkit with React-Redux. The README recommends Redux Toolkit for most tasks.
What are the requirements for Redux?
The README lists Node.js as the prerequisite but does not state a version. Check the Installation docs at redux.js.org for current details.
Is Redux free to use?
Redux is released under the MIT licence, as stated in the project's LICENSE file. The source does not mention any paid tier.
Do I need Redux for a small app?
Probably not. The README says Redux makes sense with reasonable amounts of changing data, a need for a single source of truth, or state that outgrows a top-level component. It also says small apps may not need it.
What are alternatives to Redux?
The project's comparison list names Zustand, Jotai, MobX and Recoil. The README does not compare them, so evaluate each against your app's needs.
Does Redux work without React?
Yes. The README says Redux works with React or with any other view library, and its core is about 2kB including dependencies.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Redux suits larger front-end apps where many components share state and you want changes to follow a consistent, testable pattern, especially with React and Redux Toolkit. If your app has little shared state or only needs local component state, the README itself suggests picking something simpler.
Install options & downloads