Examples

Run the Counter Vanilla example:

Or check out the :

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 example:

cd redux/examples/counter
npm start

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 bindings instead.

This example includes tests.

Todos

Run the example:

git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start

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 to generate container components from your presentational components.

This example includes tests.

Todos with Undo

Or check out the :

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.

Run the example:

git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-flow
npm install
npm start

Or check out the sandbox:

This is like the previous Todos examples, but shows how to use Redux in conjunction with .

TodoMVC

Run the example:

git clone https://github.com/reduxjs/redux.git
cd redux/examples/todomvc
npm install

Or check out the sandbox:

This is the classical 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 example:

Or check out the sandbox:

Tree View

Run the Tree View example:

git clone https://github.com/reduxjs/redux.git
npm install
npm start

Or check out the :

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.

Run the Async example:

git clone https://github.com/reduxjs/redux.git
cd redux/examples/async
npm install
npm start

Or check out the :

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:

This is a basic demonstration of 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 example:

git clone https://github.com/reduxjs/redux.git
cd redux/examples/real-world
npm start

Or check out the sandbox:

More Examples

You can find more examples in the Redux Apps and Examplespage of the .