Redux Docs

Installation
Redux Toolkit#​
Redux Toolkit includes the Redux core, as well as other key packages we feel are essential for building Redux applications (such as Redux Thunk and Reselect).
It's available as a package on NPM for use with a module bundler or in a Node application:
1
# NPMnpm install @reduxjs/toolkit
2
# Yarnyarn add @reduxjs/toolkit
Copied!
Copy
It's also available as a UMD build, which can be loaded from the dist folder on unpkg. The UMD builds make Redux Toolkit available as a window.RTK global variable.
Redux Core#​
To install the stable version:
1
# NPMnpm install redux
2
# Yarnyarn add redux
Copied!
Copy
If you're not, you can access these files on unpkg, download them, or point your package manager to them.
Most commonly, people consume Redux as a collection of CommonJS modules. These modules are what you get when you import redux in a Webpack, Browserify, or a Node environment. If you like to live on the edge and use Rollup, we support that as well.
If you don't use a module bundler, it's also fine. The redux npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a <script> tag on the page, or tell Bower to install it. The UMD builds make Redux available as a window.Redux global variable.
The Redux source code is written in ES2015 but we precompile both CommonJS and UMD builds to ES5 so they work in any modern browser. You don't need to use Babel or a module bundler to get started with Redux.
Complementary Packages#​
Most likely, you'll also need the React bindings and the developer tools.
1
npm install react-reduxnpm install --save-dev redux-devtools
Copied!
Copy
Note that unlike Redux itself, many packages in the Redux ecosystem don't provide UMD builds, so we recommend using CommonJS module bundlers like Webpack and Browserify for the most comfortable development experience.
Create a React Redux App#​
The recommended way to start new apps with React and Redux is by using the official Redux+JS template or Redux+TS template for Create React App, which takes advantage of Redux Toolkit and React Redux's integration with React components.
1
# Redux + Plain JS templatenpx create-react-app my-app --template redux
2
# Redux + TypeScript templatenpx create-react-app my-app --template redux-typescript
Copied!
Core Concepts
Imagine your app’s state is described as a plain object. For example, the state of a todo app might look like this:
1
{  todos: [{    text: 'Eat food',    completed: true  }, {    text: 'Exercise',    completed: false  }],  visibilityFilter: 'SHOW_COMPLETED'}
Copied!
Copy
This object is like a “model” except that there are no setters. This is so that different parts of the code can’t change the state arbitrarily, causing hard-to-reproduce bugs.
To change something in the state, you need to dispatch an action. An action is a plain JavaScript object (notice how we don’t introduce any magic?) that describes what happened. Here are a few example actions:
1
{ type: 'ADD_TODO', text: 'Go to swimming pool' }{ type: 'TOGGLE_TODO', index: 1 }{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
Copied!
Copy
Enforcing that every change is described as an action lets us have a clear understanding of what’s going on in the app. If something changed, we know why it changed. Actions are like breadcrumbs of what has happened. Finally, to tie state and actions together, we write a function called a reducer. Again, nothing magical about it—it’s just a function that takes state and action as arguments, and returns the next state of the app. It would be hard to write such a function for a big app, so we write smaller functions managing parts of the state:
1
function visibilityFilter(state = 'SHOW_ALL', action) {  if (action.type === 'SET_VISIBILITY_FILTER') {    return action.filter  } else {    return state  }}
2
function todos(state = [], action) {  switch (action.type) {    case 'ADD_TODO':      return state.concat([{ text: action.text, completed: false }])    case 'TOGGLE_TODO':      return state.map((todo, index) =>        action.index === index          ? { text: todo.text, completed: !todo.completed }          : todo      )    default:      return state  }}
Copied!
Copy
And we write another reducer that manages the complete state of our app by calling those two reducers for the corresponding state keys:
1
function todoApp(state = {}, action) {  return {    todos: todos(state.todos, action),    visibilityFilter: visibilityFilter(state.visibilityFilter, action)  }}
Copied!
Copy
This is basically the whole idea of Redux. Note that we haven’t used any Redux APIs. It comes with a few utilities to facilitate this pattern, but the main idea is that you describe how your state is updated over time in response to action objects, and 90% of the code you write is just plain JavaScript, with no use of Redux itself, its APIs, or any magic.
Ecosystem
Redux is a tiny library, but its contracts and APIs are carefully chosen to spawn an ecosystem of tools and extensions, and the community has created a wide variety of helpful addons, libraries, and tools. You don't need to use any of these addons to use Redux, but they can help make it easier to implement features and solve problems in your application.
For an extensive catalog of libraries, addons, and tools related to Redux, check out the Redux Ecosystem Links list. Also, the React/Redux Links list contains tutorials and other useful resources for anyone learning React or Redux.
This page lists some of the Redux-related addons that the Redux maintainers have vetted personally, or that have shown widespread adoption in the community. Don't let this discourage you from trying the rest of them! The ecosystem is growing too fast, and we have a limited time to look at everything. Consider these the “staff picks”, and don't hesitate to submit a PR if you've built something wonderful with Redux.
Table of Contents#​
​Ecosystem​
​Table of Contents​
​Library Integration and Bindings​
​Reducers​
​Reducer Combination​
​Reducer Composition​
​Higher-Order Reducers​
​Actions​
​Utilities​
​Store​
​Change Subscriptions​
​Batching​
​Persistence​
​Immutable Data​
​Data Structures​
​Immutable Update Utilities​
​Immutable/Redux Interop​
​Side Effects​
​Widely Used​
​Promises​
​Middleware​
​Networks and Sockets​
​Async Behavior​
​Analytics​
​Entities and Collections​
​Component State and Encapsulation​
​Dev Tools​
​Debuggers and Viewers​
​DevTools Monitors​
​Logging​
​Mutation Detection​
​Testing​
​Routing​
​Forms​
​Higher-Level Abstractions​
​Community Conventions​
Library Integration and Bindings#​
​reduxjs/react-redux
The official React bindings for Redux, maintained by the Redux team
​angular-redux/ng-redux
Angular 1 bindings for Redux
​ember-redux/ember-redux
Ember bindings for Redux
​glimmer-redux/glimmer-redux
Redux bindings for Ember's Glimmer component engine
​tur-nr/polymer-redux
Redux bindings for Polymer
​lastmjs/redux-store-element Redux bindings for custom elements
Reducers#​
Reducer Combination#
​ryo33/combineSectionReducers
An expanded version of combineReducers, which allows passing state as a third argument to all slice reducers.
​KodersLab/topologically-combine-reducers
A combineReducers variation that allows defining cross-slice dependencies for ordering and data passing
1
var masterReducer = topologicallyCombineReducers(  { auth, users, todos },  // define the dependency tree  { auth: ['users'], todos: ['auth'] })
Copied!
Copy
Reducer Composition#
​acdlite/reduce-reducers
Provides sequential composition of reducers at the same level
1
const combinedReducer = combineReducers({ users, posts, comments })const rootReducer = reduceReducers(combinedReducer, otherTopLevelFeatureReducer)
Copied!
Copy
​mhelmer/redux-xforms
A collection of composable reducer transformers
1
const createByFilter = (predicate, mapActionToKey) =>  compose(    withInitialState({}), // inject initial state as {}    withFilter(predicate), // let through if action has filterName    updateSlice(mapActionToKey), // update a single key in the state    isolateSlice(mapActionToKey) // run the reducer on a single state slice  )
Copied!
Copy
​adrienjt/redux-data-structures
Reducer factory functions for common data structures: counters, maps, lists (queues, stacks), sets
1
const myCounter = counter({  incrementActionTypes: ['INCREMENT'],  decrementActionTypes: ['DECREMENT']})
Copied!
Copy
Higher-Order Reducers#
​omnidan/redux-undo
Effortless undo/redo and action history for your reducers
​omnidan/redux-ignore
Ignore redux actions by array or filter function
​omnidan/redux-recycle
Reset the redux state on certain actions
​ForbesLindesay/redux-optimist
A reducer enhancer to enable type-agnostic optimistic updates
Actions#​
​reduxactions/redux-actions
Flux Standard Action utilities for Redux
1
const increment = createAction('INCREMENT')const reducer = handleActions({ [increment]: (state, action) => state + 1 }, 0)const store = createStore(reducer)store.dispatch(increment())
Copied!
Copy
​BerkeleyTrue/redux-create-types
Creates standard and async action types based on namespaces
1
export const types = createTypes(  ['openModal', createAsyncTypes('fetch')],  'app')// { openModal : "app.openModal", fetch : { start : "app.fetch.start", complete: 'app.fetch.complete' } }
Copied!
Copy
​maxhallinan/kreighter
Generates action creators based on types and expected fields
1
const formatTitle = (id, title) => ({  id,  title: toTitleCase(title)})const updateBazTitle = fromType('UPDATE_BAZ_TITLE', formatTitle)updateBazTitle(1, 'foo bar baz')// -> { type: 'UPDATE_BAZ_TITLE', id: 1, title: 'Foo Bar Baz', }
Copied!
Copy
Utilities#​
​reduxjs/reselect
Creates composable memoized selector functions for efficiently deriving data from the store state
1
const taxSelector = createSelector(  [subtotalSelector, taxPercentSelector],  (subtotal, taxPercent) => subtotal * (taxPercent / 100))
Copied!
Copy
​paularmstrong/normalizr
Normalizes nested JSON according to a schema
1
const user = new schema.Entity('users')const comment = new schema.Entity('comments', { commenter: user })const article = new schema.Entity('articles', {  author: user,  comments: [comment]})const normalizedData = normalize(originalData, article)
Copied!
Copy
​planttheidea/selectorator
Abstractions over Reselect for common selector use cases
1
const getBarBaz = createSelector(  ['foo.bar', 'baz'],  (bar, baz) => `${bar} ${baz}`)getBarBaz({ foo: { bar: 'a' }, baz: 'b' }) // "a b"
Copied!
Copy
Store#​
Change Subscriptions#
​jprichardson/redux-watch
Watch for state changes based on key paths or selectors
1
let w = watch(() => mySelector(store.getState()))store.subscribe(  w((newVal, oldVal) => {    console.log(newval, oldVal)  }))
Copied!
Copy
​ashaffer/redux-subscribe
Centralized subscriptions to state changes based on paths
1
store.dispatch( subscribe("users.byId.abcd", "subscription1", () => {} );
Copied!
Copy
Batching#
​tappleby/redux-batched-subscribe
Store enhancer that can debounce subscription notifications
1
const debounceNotify = _.debounce(notify => notify())const store = createStore(  reducer,  initialState,  batchedSubscribe(debounceNotify))
Copied!
Copy
​manaflair/redux-batch
Store enhancer that allows dispatching arrays of actions
1
const store = createStore(reducer, reduxBatch)store.dispatch([{ type: 'INCREMENT' }, { type: 'INCREMENT' }])
Copied!
Copy
​laysent/redux-batch-actions-enhancer
Store enhancer that accepts batched actions
1
const store = createStore(reducer, initialState, batch().enhancer)store.dispatch(createAction({ type: 'INCREMENT' }, { type: 'INCREMENT' }))
Copied!
Copy
​tshelburne/redux-batched-actions
Higher-order reducer that handles batched actions
1
const store = createStore(enableBatching(reducer), initialState)store.dispatch(batchActions([{ type: 'INCREMENT' }, { type: 'INCREMENT' }]))
Copied!
Copy
Persistence#
​rt2zz/redux-persist
Persist and rehydrate a Redux store, with many extensible options
1
const store = createStore(reducer, autoRehydrate())persistStore(store)
Copied!
Copy
​react-stack/redux-storage
Persistence layer for Redux with flexible backends
1
const reducer = storage.reducer(combineReducers(reducers))const engine = createEngineLocalStorage('my-save-key')const storageMiddleware = storage.createMiddleware(engine)const store = createStore(reducer, applyMiddleware(storageMiddleware))
Copied!
Copy
​redux-offline/redux-offline
Persistent store for Offline-First apps, with support for optimistic UIs
1
const store = createStore(reducer, offline(offlineConfig))store.dispatch({  type: 'FOLLOW_USER_REQUEST',  meta: { offline: { effect: {}, commit: {}, rollback: {} } }})
Copied!
Copy
Immutable Data#​
​ImmerJS/immer
Immutable updates with normal mutative code, using Proxies
1
const nextState = produce(baseState, draftState => {  draftState.push({ todo: 'Tweet about it' })  draftState[1].done = true})
Copied!
Copy
Side Effects#​
Widely Used#
​gaearon/redux-thunk
Dispatch functions, which are called and given dispatch and getState as parameters. This acts as a loophole for AJAX calls and other async behavior.
Best for: getting started, simple async and complex synchronous logic.
1
function fetchData(someValue) {    return (dispatch, getState) => {        dispatch({type : "REQUEST_STARTED"});
2
        myAjaxLib.post("/someEndpoint", {data : someValue})            .then(response => dispatch({type : "REQUEST_SUCCEEDED", payload : response})            .catch(error => dispatch({type : "REQUEST_FAILED", error : error});    };}
3
function addTodosIfAllowed(todoText) {    return (dispatch, getState) => {        const state = getState();
4
        if(state.todos.length < MAX_TODOS) {            dispatch({type : "ADD_TODO", text : todoText});        }    }}
Copied!
Copy
​redux-saga/redux-saga
Handle async logic using synchronous-looking generator functions. Sagas return descriptions of effects, which are executed by the saga middleware, and act like "background threads" for JS applications.
Best for: complex async logic, decoupled workflows
1
function* fetchData(action) {  const { someValue } = action  try {    const response = yield call(myAjaxLib.post, '/someEndpoint', {      data: someValue    })    yield put({ type: 'REQUEST_SUCCEEDED', payload: response })  } catch (error) {    yield put({ type: 'REQUEST_FAILED', error: error })  }}
2
function* addTodosIfAllowed(action) {  const { todoText } = action  const todos = yield select(state => state.todos)
3
  if (todos.length < MAX_TODOS) {    yield put({ type: 'ADD_TODO', text: todoText })  }}
Copied!
Copy
​redux-observable/redux-observable​
Handle async logic using RxJS observable chains called "epics". Compose and cancel async actions to create side effects and more.
Best for: complex async logic, decoupled workflows
1
const loginRequestEpic = action$ =>  action$    .ofType(LOGIN_REQUEST)    .mergeMap(({ payload: { username, password } }) =>      Observable.from(postLogin(username, password))        .map(loginSuccess)        .catch(loginFailure)    )
2
const loginSuccessfulEpic = action$ =>  action$    .ofType(LOGIN_SUCCESS)    .delay(2000)    .mergeMap(({ payload: { msg } }) => showMessage(msg))
3
const rootEpic = combineEpics(loginRequestEpic, loginSuccessfulEpic)
Copied!
Copy
​redux-loop/redux-loop​
A port of the Elm Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your reducers. Reducers now return both a state value and a side effect description.
Best for: trying to be as much like Elm as possible in Redux+JS
1
export const reducer = (state = {}, action) => {  switch (action.type) {    case ActionType.LOGIN_REQUEST:      const { username, password } = action.payload      return loop(        { pending: true },        Effect.promise(loginPromise, username, password)      )    case ActionType.LOGIN_SUCCESS:      const { user, msg } = action.payload      return loop(        { pending: false, user },        Effect.promise(delayMessagePromise, msg, 2000)      )    case ActionType.LOGIN_FAILURE:      return { pending: false, err: action.payload }    default:      return state  }}
Copied!
Copy
​jeffbski/redux-logic​
Side effects lib built with observables, but allows use of callbacks, promises, async/await, or observables. Provides declarative processing of actions.
Best for: very decoupled async logic
1
const loginLogic = createLogic({  type: Actions.LOGIN_REQUEST,
2
  process({ getState, action }, dispatch, done) {    const { username, password } = action.payload
3
    postLogin(username, password)      .then(        ({ user, msg }) => {          dispatch(loginSucceeded(user))
4
          setTimeout(() => dispatch(showMessage(msg)), 2000)        },        err => dispatch(loginFailure(err))      )      .then(done)  }})
Copied!
Copy
Promises#
​acdlite/redux-promise
Dispatch promises as action payloads, and have FSA-compliant actions dispatched as the promise resolves or rejects.
1
dispatch({ type: 'FETCH_DATA', payload: myAjaxLib.get('/data') })// will dispatch either {type : "FETCH_DATA", payload : response} if resolved,// or dispatch {type : "FETCH_DATA", payload : error, error : true} if rejected
Copied!
Copy
​lelandrichardson/redux-pack
Sensible, declarative, convention-based promise handling that guides users in a good direction without exposing the full power of dispatch.
1
dispatch({type : "FETCH_DATA", payload : myAjaxLib.get("/data") });
2
// in a reducer:        case "FETCH_DATA": =            return handle(state, action, {                start: prevState => ({                  ...prevState,                  isLoading: true,                  fooError: null                }),                finish: prevState => ({ ...prevState, isLoading: false }),                failure: prevState => ({ ...prevState, fooError: payload }),                success: prevState => ({ ...prevState, foo: payload }),            });
Copied!
Copy
Middleware#​
Networks and Sockets#
​svrcekmichal/redux-axios-middleware
Fetches data with Axios and dispatches start/success/fail actions
1
export const loadCategories() => ({ type: 'LOAD', payload: { request : { url: '/categories'} } });
Copied!
Copy
​agraboso/redux-api-middleware
Reads API call actions, fetches, and dispatches FSAs
1
const fetchUsers = () => ({  [CALL_API]: {    endpoint: 'http://www.example.com/api/users',    method: 'GET',    types: ['REQUEST', 'SUCCESS', 'FAILURE']  }})
Copied!
Copy
​itaylor/redux-socket.io
An opinionated connector between socket.io and redux.
1
const store = createStore(reducer, applyMiddleware(socketIoMiddleware))store.dispatch({ type: 'server/hello', data: 'Hello!' })
Copied!
Copy
​tiberiuc/redux-react-firebase
Integration between Firebase, React, and Redux
Async Behavior#
​rt2zz/redux-action-buffer
Buffers all actions into a queue until a breaker condition is met, at which point the queue is released
​wyze/redux-debounce
FSA-compliant middleware for Redux to debounce actions.
​mathieudutour/redux-queue-offline
Queue actions when offline and dispatch them when getting back online.
Analytics#
​rangle/redux-beacon
Integrates with any analytics services, can track while offline, and decouples analytics logic from app logic
​markdalgleish/redux-analytics
Watches for Flux Standard Actions with meta analytics values and processes them
Entities and Collections#​
​tommikaikkonen/redux-orm
A simple immutable ORM to manage relational data in your Redux store.
​Versent/redux-crud
Convention-based actions and reducers for CRUD logic
​kwelch/entities-reducer
A higher-order reducer that handles data from Normalizr
​amplitude/redux-query
Declare colocated data dependencies with your components, run queries when components mount, perform optimistic updates, and trigger server changes with Redux actions.
​cantierecreativo/redux-bees
Declarative JSON-API interaction that normalizes data, with a React HOC that can run queries
​GetAmbassador/redux-clerk
Async CRUD handling with normalization, optimistic updates, sync/async action creators, selectors, and an extendable reducer.
​shoutem/redux-io
JSON-API abstraction with async CRUD, normalization, optimistic updates, caching, data status, and error handling.
​jmeas/redux-resource
A tiny but powerful system for managing 'resources': data that is persisted to remote servers.
Component State and Encapsulation#​
​threepointone/redux-react-local
Local component state in Redux, with handling for component actions
1
@local({  ident: 'counter', initial: 0, reducer : (state, action) => action.me ? state + 1 : state }})class Counter extends React.Component {
Copied!
Copy
​epeli/lean-redux
Makes component state in Redux as easy as setState
1
const DynamicCounters = connectLean(    scope: "dynamicCounters",    getInitialState() => ({counterCount : 1}),    addCounter, removeCounter)(CounterList);
Copied!
Copy
​DataDog/redux-doghouse
Aims to make reusable components easier to build with Redux by scoping actions and reducers to a particular instance of a component.
1
const scopeableActions = new ScopedActionFactory(actionCreators)const actionCreatorsScopedToA = scopeableActions.scope('a')actionCreatorsScopedToA.foo('bar') //{ type: SET_FOO, value: 'bar', scopeID: 'a' }
2
const boundScopeableActions = bindScopedActionFactories(  scopeableActions,  store.dispatch)const scopedReducers = scopeReducers(reducers)
Copied!
Copy
Dev Tools#​
Debuggers and Viewers#
​reduxjs/redux-devtools​
Dan Abramov's original Redux DevTools implementation, built for in-app display of state and time-travel debugging
​zalmoxisus/redux-devtools-extension​
Mihail Diordiev's browser extension, which bundles multiple state monitor views and adds integration with the browser's own dev tools
​infinitered/reactotron​
A cross-platform Electron app for inspecting React and React Native apps, including app state, API requests, perf, errors, sagas, and action dispatching.
DevTools Monitors#
​Log Monitor
The default monitor for Redux DevTools with a tree view
​Dock Monitor
A resizable and movable dock for Redux DevTools monitors
​Slider Monitor
A custom monitor for Redux DevTools to replay recorded Redux actions
​Diff Monitor
A monitor for Redux DevTools that diffs the Redux store mutations between actions
​Filterable Log Monitor
Filterable tree view monitor for Redux DevTools
​Filter Actions
Redux DevTools composable monitor with the ability to filter actions
Logging#
​evgenyrodionov/redux-logger
Logging middleware that shows actions, states, and diffs
​inakianduaga/redux-state-history
Enhancer that provides time-travel and efficient action recording capabilities, including import/export of action logs and action playback.
​joshwcomeau/redux-vcr
Record and replay user sessions in real-time
​socialtables/redux-unhandled-action
Warns about actions that produced no state changes in development
Mutation Detection#
​leoasis/redux-immutable-state-invariant
Middleware that throws an error when you try to mutate your state either inside a dispatch or between dispatches.
​flexport/mutation-sentinel
Helps you deeply detect mutations at runtime and enforce immutability in your codebase.
​mmahalwy/redux-pure-connect
Check and log whether react-redux's connect method is passed mapState functions that create impure props.
Testing#​
​arnaudbenard/redux-mock-store
A mock store that saves dispatched actions in an array for assertions
​Workable/redux-test-belt
Extends the store API to make it easier assert, isolate, and manipulate the store
​conorhastings/redux-test-recorder
Middleware to automatically generate reducers tests based on actions in the app
​wix/redux-testkit
Complete and opinionated testkit for testing Redux projects (reducers, selectors, actions, thunks)
​jfairbank/redux-saga-test-plan
Makes integration and unit testing of sagas a breeze
Routing#​
​supasate/connected-react-router Synchronize React Router 4 state with your Redux store.
​faceyspacey/redux-first-router
Seamless Redux-first routing. Think of your app in states, not routes, not components, while keeping the address bar in sync. Everything is state. Connect your components and just dispatch flux standard actions.
Forms#​
​erikras/redux-form
A full-featured library to enable a React HTML form to store its state in Redux.
​davidkpiano/react-redux-form
React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant.
Higher-Level Abstractions#​
​keajs/kea
An abstraction over Redux, Redux-Saga and Reselect. Provides a framework for your app’s actions, reducers, selectors and sagas. It empowers Redux, making it as simple to use as setState. It reduces boilerplate and redundancy, while retaining composability.
​TheComfyChair/redux-scc
Takes a defined structure and uses 'behaviors' to create a set of actions, reducer responses and selectors.
​Bloomca/redux-tiles
Provides minimal abstraction on top of Redux, to allow easy composability, easy async requests, and sane testability.
Community Conventions#​
​Flux Standard Action
A human-friendly standard for Flux action objects
​Canonical Reducer Composition
An opinionated standard for nested reducer composition
​Ducks: Redux Reducer Bundles
A proposal for bundling reducers, action types and actions
Examples
Redux is distributed with a few examples in its source code. Most of these examples are also on CodeSandbox, an online editor that lets you play with the examples online.
Counter Vanilla#​
Run the Counter Vanilla example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/counter-vanillaopen index.html
Copied!
Copy
Or check out the sandbox:
It does not require a build system or a view framework and exists to show the raw Redux API used with ES5.
Counter#​
Run the Counter example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/counternpm installnpm start
Copied!
Copy
Or check out the sandbox:
This is the most basic example of using Redux together with React. For simplicity, it re-renders the React component manually when the store changes. In real projects, you will likely want to use the highly performant React Redux bindings instead.
This example includes tests.
Todos#​
Run the Todos example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/todosnpm installnpm start
Copied!
Copy
Or check out the sandbox:
This is the best example to get a deeper understanding of how the state updates work together with components in Redux. It shows how reducers can delegate handling actions to other reducers, and how you can use React Redux to generate container components from your presentational components.
This example includes tests.
Todos with Undo#​
Run the Todos with Undo example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/todos-with-undonpm installnpm start
Copied!
Copy
Or check out the sandbox:
This is a variation on the previous example. It is almost identical, but additionally shows how wrapping your reducer with Redux Undo lets you add a Undo/Redo functionality to your app with a few lines of code.
TodoMVC#​
Run the TodoMVC example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/todomvcnpm installnpm start
Copied!
Copy
Or check out the sandbox:
This is the classical TodoMVC example. It's here for the sake of comparison, but it covers the same points as the Todos example.
This example includes tests.
Shopping Cart#​
Run the Shopping Cart example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/shopping-cartnpm installnpm start
Copied!
Copy
Or check out the sandbox:
This example shows important idiomatic Redux patterns that become important as your app grows. In particular, it shows how to store entities in a normalized way by their IDs, how to compose reducers on several levels, and how to define selectors alongside the reducers so the knowledge about the state shape is encapsulated. It also demonstrates logging with Redux Logger and conditional dispatching of actions with Redux Thunk middleware.
Tree View#​
Run the Tree View example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/tree-viewnpm installnpm start
Copied!
Copy
Or check out the sandbox:
This example demonstrates rendering a deeply nested tree view and representing its state in a normalized form so it is easy to update from reducers. Good rendering performance is achieved by the container components granularly subscribing only to the tree nodes that they render.
This example includes tests.
Async#​
Run the Async example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/asyncnpm installnpm start
Copied!
Copy
Or check out the sandbox:
This example includes reading from an asynchronous API, fetching data in response to user input, showing loading indicators, caching the response, and invalidating the cache. It uses Redux Thunk middleware to encapsulate asynchronous side effects.
Universal#​
Run the Universal example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/universalnpm installnpm start
Copied!
Copy
This is a basic demonstration of server rendering with Redux and React. It shows how to prepare the initial store state on the server, and pass it down to the client so the client store can boot up from an existing state.
Real World#​
Run the Real World example:
1
git clone https://github.com/reduxjs/redux.git
2
cd redux/examples/real-worldnpm installnpm start
Copied!
Copy
Or check out the sandbox:
This is the most advanced example. It is dense by design. It covers keeping fetched entities in a normalized cache, implementing a custom middleware for API calls, rendering partially loaded data, pagination, caching responses, displaying error messages, and routing. Additionally, it includes Redux DevTools.
Redux
Redux Resources
Last modified 14d ago
Installation

Redux Toolkit#​

Redux Core#​

Complementary Packages#​

Create a React Redux App#​

Core Concepts

Ecosystem

Table of Contents#​

Library Integration and Bindings#​

Reducers#​

Actions#​

Utilities#​

Store#​

Immutable Data#​

Side Effects#​

Middleware#​

Entities and Collections#​

Component State and Encapsulation#​

Dev Tools#​

Testing#​

Routing#​

Forms#​

Higher-Level Abstractions#​

Community Conventions#​

Examples

Counter Vanilla#​

Counter#​

Todos#​

Todos with Undo#​

TodoMVC#​

Shopping Cart#​

Tree View#​

Async#​

Universal#​

Real World#​

Redux Toolkit#

Redux Core#

Complementary Packages#

Create a React Redux App#

Table of Contents#

Library Integration and Bindings#

Reducers#

Actions#

Utilities#

Store#

Immutable Data#

Side Effects#

Middleware#

Entities and Collections#

Component State and Encapsulation#

Dev Tools#

Testing#

Routing#

Forms#

Higher-Level Abstractions#

Community Conventions#

Counter Vanilla#

Counter#

Todos#

Todos with Undo#

TodoMVC#

Shopping Cart#

Tree View#

Async#

Universal#

Real World#
