Redux in Russian
  • Read Me
  • Introduction
    • Motivation
    • Core Concepts
    • Three Principles
    • Prior Art
    • Learning Resources
    • Ecosystem
    • Examples
  • Basics
    • Actions
    • Reducers
    • Store
    • Data Flow
    • Usage with React
    • Example: Todo List
  • Advanced
    • Async Actions
    • Async Flow
    • Middleware
    • Usage with React Router
    • Example: Reddit API
    • Next Steps
  • Recipes
    • Configuring Your Store
    • Migrating to Redux
    • Using Object Spread Operator
    • Reducing Boilerplate
    • Server Rendering
    • Writing Tests
    • Computing Derived Data
    • Implementing Undo History
    • Isolating Subapps
    • Structuring Reducers
      • Prerequisite Concepts
      • Basic Reducer Structure
      • Splitting Reducer Logic
      • Refactoring Reducers Example
      • Using combineReducers
      • Beyond combineReducers
      • Normalizing State Shape
      • Updating Normalized Data
      • Reusing Reducer Logic
      • Immutable Update Patterns
      • Initializing State
    • Using Immutable.JS with Redux
  • FAQ
    • General
    • Reducers
    • Organizing State
    • Store Setup
    • Actions
    • Immutable Data
    • Code Structure
    • Performance
    • Design Decisions
    • React Redux
    • Miscellaneous
  • Troubleshooting
  • Glossary
  • API Reference
    • createStore
    • Store
    • combineReducers
    • applyMiddleware
    • bindActionCreators
    • compose
  • Change Log
  • Patrons
  • Feedback
Powered by GitBook
On this page
  • Counter Vanilla
  • Counter
  • Todos
  • Todos with Undo
  • TodoMVC
  • Shopping Cart
  • Tree View
  • Async
  • Universal
  • Real World
  • More Examples
  1. Introduction

Examples

PreviousEcosystemNextBasics

Last updated 6 years ago

Redux is distributed with a few examples in its . Most of these examples are also on , this is an online editor that lets you play with the examples online.

Counter Vanilla

Run the example:

git clone https://github.com/reactjs/redux.git

cd redux/examples/counter-vanilla
open index.html

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:

git clone https://github.com/reactjs/redux.git

cd redux/examples/counter
npm install
npm start

Or check out the .

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

git clone https://github.com/reactjs/redux.git

cd redux/examples/todos
npm install
npm start

This example includes tests.

Todos with Undo

git clone https://github.com/reactjs/redux.git

cd redux/examples/todos-with-undo
npm install
npm start

TodoMVC

git clone https://github.com/reactjs/redux.git

cd redux/examples/todomvc
npm install
npm start

This example includes tests.

Shopping Cart

git clone https://github.com/reactjs/redux.git

cd redux/examples/shopping-cart
npm install
npm start

Tree View

git clone https://github.com/reactjs/redux.git

cd redux/examples/tree-view
npm install
npm start

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

git clone https://github.com/reactjs/redux.git

cd redux/examples/async
npm install
npm start

Universal

git clone https://github.com/reactjs/redux.git

cd redux/examples/universal
npm install
npm start

Real World

git clone https://github.com/reactjs/redux.git

cd redux/examples/real-world
npm install
npm start

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

Run the example:

Or check out the .

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.

Run the example:

Or check out the .

This is a variation on the previous example. It is almost identical, but additionally shows how wrapping your reducer with lets you add a Undo/Redo functionality to your app with a few lines of code.

Run the example:

Or check out the .

This is the classical example. It's here for the sake of comparison, but it covers the same points as the Todos example.

Run the example:

Or check out the .

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 and conditional dispatching of actions with middleware.

Run the example:

Or check out the .

Run the example:

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 middleware to encapsulate asynchronous side effects.

Run the 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.

Run the example:

Or check out the .

You can find more examples in .

source code
CodeSandbox
Counter Vanilla
Counter
sandbox
React Redux
Todos
sandbox
React Redux
Todos with Undo
sandbox
Redux Undo
TodoMVC
sandbox
TodoMVC
Shopping Cart
sandbox
Redux Logger
Redux Thunk
Tree View
sandbox
Async
sandbox
Redux Thunk
Universal
server rendering
Real World
sandbox
Awesome Redux