# examples

[![Redux Logo](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/d33wubrfki0l68.cloudfront.net/0834d0215db51e91525a25acf97433051f280f2f/c30f5/img/redux.svg)**Redux**](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/index.html)

[Getting Started](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html)[Tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)[API](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)[FAQ](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)[Best Practices](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/style-guide/style-guide.html)[GitHub](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/github.com/reduxjs/redux.html)[Need help?](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html#help-and-discussion)

🌜

🌞

Search

[![Redux Logo](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/d33wubrfki0l68.cloudfront.net/0834d0215db51e91525a25acf97433051f280f2f/c30f5/img/redux.svg)**Redux**](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/index.html)

* [Getting Started](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html)
* [Tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)
* [API](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)
* [FAQ](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)
* [Best Practices](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/style-guide/style-guide.html)
* [GitHub](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/github.com/reduxjs/redux.html)
* [Need help?](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html#help-and-discussion)
* [Introduction](#!)
  * [Getting Started with Redux](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html)
  * [Installation](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/installation.html)
  * [Core Concepts](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/core-concepts.html)
  * [Learning Resources](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/learning-resources.html)
  * [Ecosystem](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/ecosystem.html)
  * [Examples](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/examples.html)
* [Tutorials](#!)
  * [Tutorials Index](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/index.html)
  * [Quick Start](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/quick-start.html)
  * [TypeScript Quick Start](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/typescript-quick-start.html)
  * [Redux Essentials](#!)
    * [Redux Overview and Concepts](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)
    * [Redux App Structure](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-2-app-structure.html)
    * [Basic Redux Data Flow](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-3-data-flow.html)
    * [Using Redux Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-4-using-data.html)
    * [Async Logic and Data Fetching](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-5-async-logic.html)
    * [Performance and Normalizing Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-6-performance-normalization.html)
  * [Redux Fundamentals](#!)
    * [Redux Overview](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-1-overview.html)
    * [Redux Concepts and Data Flow](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-2-concepts-data-flow.html)
    * [State, Actions, and Reducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-3-state-actions-reducers.html)
    * [Store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-4-store.html)
    * [UI and React](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-5-ui-react.html)
    * [Async Logic and Data Fetching](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-6-async-logic.html)
    * [Standard Redux Patterns](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-7-standard-patterns.html)
    * [Modern Redux with Redux Toolkit](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-8-modern-redux.html)
* [Recipes](#!)
  * [Recipes: Index](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/recipe-index.html)
  * [Configuring Your Store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/configuring-your-store.html)
  * [Usage With TypeScript](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/usage-with-typescript.html)
  * [Migrating to Redux](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/migrating-to-redux.html)
  * [Using Object Spread Operator](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/using-object-spread-operator.html)
  * [Reducing Boilerplate](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/reducing-boilerplate.html)
  * [Server Rendering](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/server-rendering.html)
  * [Writing Tests](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/writing-tests.html)
  * [Computing Derived Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/computing-derived-data.html)
  * [Implementing Undo History](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/implementing-undo-history.html)
  * [Isolating Redux Sub-Apps](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/isolating-redux-sub-apps.html)
  * [Code Splitting](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/code-splitting.html)
  * [Troubleshooting](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/troubleshooting.html)
  * [Structuring Reducers](#!)
    * [Structuring Reducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/structuring-reducers.html)
    * [Prerequisite Concepts](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/prerequisite-concepts.html)
    * [Basic Reducer Structure](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/basic-reducer-structure.html)
    * [Splitting Reducer Logic](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/splitting-reducer-logic.html)
    * [Refactoring Reducers Example](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/refactoring-reducer-example.html)
    * [Using combineReducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/using-combinereducers.html)
    * [Beyond combineReducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/beyond-combinereducers.html)
    * [Normalizing State Shape](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/normalizing-state-shape.html)
    * [Updating Normalized Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/updating-normalized-data.html)
    * [Reusing Reducer Logic](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/reusing-reducer-logic.html)
    * [Immutable Update Patterns](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/immutable-update-patterns.html)
    * [Initializing State](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/structuring-reducers/initializing-state.html)
* [Understanding Redux](#!)
  * [Thinking in Redux](#!)
    * [Motivation](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/thinking-in-redux/motivation.html)
    * [Three Principles](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/thinking-in-redux/three-principles.html)
    * [Glossary](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/thinking-in-redux/glossary.html)
  * [History and Design](#!)
    * [Prior Art](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/history-and-design/prior-art.html)
    * [Middleware](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/history-and-design/middleware.html)
* [FAQ](#!)
  * [FAQ Index](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)
  * [General](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/general.html)
  * [Reducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/reducers.html)
  * [Organizing State](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/organizing-state.html)
  * [Store Setup](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/store-setup.html)
  * [Actions](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/actions.html)
  * [Immutable Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/immutable-data.html)
  * [Code Structure](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/code-structure.html)
  * [Performance](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/performance.html)
  * [Design Decisions](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/design-decisions.html)
  * [React Redux](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/react-redux.html)
  * [Miscellaneous](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/miscellaneous.html)
* [Style Guide](#!)
  * [Style Guide: Best Practices](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/style-guide/style-guide.html)
* [API Reference](#!)
  * [API Reference](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)
  * [createStore](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/createstore.html)
  * [Store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/store.html)
  * [combineReducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/combinereducers.html)
  * [applyMiddleware](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/applymiddleware.html)
  * [bindActionCreators](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/bindactioncreators.html)
  * [compose](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/compose.html)
* [Redux Toolkit](#!)
  * [Redux Toolkit: Overview](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/redux-toolkit/overview.html)

## Examples[#](#examples)

Redux is distributed with a few examples in its [source code](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples.html). Most of these examples are also on [CodeSandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/index.html), an online editor that lets you play with the examples online.

### Counter Vanilla[#](#counter-vanilla)

Run the [Counter Vanilla](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/counter-vanilla.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/counter-vanilla

open index.html

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter-vanilla.html):

It does not require a build system or a view framework and exists to show the raw Redux API used with ES5.

### Counter[#](#counter)

Run the [Counter](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/counter.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/counter

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter.html):

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](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/react-redux.html) bindings instead.

This example includes tests.

### Todos[#](#todos)

Run the [Todos](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/todos.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/todos

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos.html):

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](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/react-redux.html) to generate container components from your presentational components.

This example includes tests.

### Todos with Undo[#](#todos-with-undo)

Run the [Todos with Undo](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/todos-with-undo.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/todos-with-undo

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos-with-undo.html):

This is a variation on the previous example. It is almost identical, but additionally shows how wrapping your reducer with [Redux Undo](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/omnidan/redux-undo.html) lets you add a Undo/Redo functionality to your app with a few lines of code.

### Todos w/ Flow[#](#todos-w-flow)

Run the [Todos w/ Flow](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/todos-flow.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/todos-flow

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos-flow.html):

This is like the previous Todos examples, but shows how to use Redux in conjunction with [Flow](https://github.com/bgoonz/Learning-Redux/blob/master/flow.org/index.html).

### TodoMVC[#](#todomvc)

Run the [TodoMVC](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/todomvc.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/todomvc

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todomvc.html):

This is the classical [TodoMVC](https://github.com/bgoonz/Learning-Redux/blob/master/todomvc.com/index.html) 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[#](#shopping-cart)

Run the [Shopping Cart](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/shopping-cart.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/shopping-cart

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/shopping-cart.html):

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](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/LogRocket/redux-logger.html) and conditional dispatching of actions with [Redux Thunk](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux-thunk.html) middleware.

### Tree View[#](#tree-view)

Run the [Tree View](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/tree-view.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/tree-view

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/tree-view.html):

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[#](#async)

Run the [Async](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/async.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/async

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/async.html):

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](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux-thunk.html) middleware to encapsulate asynchronous side effects.

### Universal[#](#universal)

Run the [Universal](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/universal.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/universal

npm install

npm start

Copy

This is a basic demonstration of [server rendering](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/recipes/server-rendering.html) 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[#](#real-world)

Run the [Real World](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux/tree/master/examples/real-world.html) example:

git clone <https://github.com/reduxjs/redux.git>

cd redux/examples/real-world

npm install

npm start

Copy

Or check out the [sandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux/tree/master/examples/real-world.html):

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.

### More Examples[#](#more-examples)

You can find more examples in the [Redux Apps and Examples](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.html) page of the [Redux Addons Catalog](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/markerikson/redux-ecosystem-links.html).

Previous

« Ecosystem

Next

Redux Tutorials Index »

* [Counter Vanilla](#counter-vanilla)
* [Counter](#counter)
* [Todos](#todos)
* [Todos with Undo](#todos-with-undo)
* [Todos w/ Flow](#todos-w-flow)
* [TodoMVC](#todomvc)
* [Shopping Cart](#shopping-cart)
* [Tree View](#tree-view)
* [Async](#async)
* [Universal](#universal)
* [Real World](#real-world)
* [More Examples](#more-examples)

**Docs**

* [Getting Started](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html)
* [Tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)
* [FAQ](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)
* [API Reference](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)

**Community**

* [Reactiflux Discord](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/discord.com/invite/0ZcbPKXt5bZ6au5t.html)
* [Stack Overflow](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/stackoverflow.com/questions/tagged/redux.html)
* [Feedback](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/getting-started.html#help-and-discussion)

**More**

* [GitHub](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/github.com/reduxjs/redux.html)
* [![Deploys by Netlify](https://github.com/bgoonz/Learning-Redux/blob/master/www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://github.com/bgoonz/Learning-Redux/blob/master/www.netlify.com/index.html)

[![Redux Logo](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/d33wubrfki0l68.cloudfront.net/0834d0215db51e91525a25acf97433051f280f2f/c30f5/img/redux.svg)![Redux Logo](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/d33wubrfki0l68.cloudfront.net/0834d0215db51e91525a25acf97433051f280f2f/c30f5/img/redux.svg)](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/index.html)

Copyright © 2015–2021 Dan Abramov and the Redux documentation authors.