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:
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:
Or check out the sandbox:
This is the most basic example of using Redux together with React and it's also a create-react-app template.
So it's the same code you'd get running npx create-react-app my-app --template redux
This example includes tests.
Todos
Run the Todos example:
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:
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.
Shopping Cart
Run the Shopping Cart example:
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:
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.
Redux essentials
The example app from the "Redux Essentials" tutorial is a larger "real world"-type app that shows:
- Use of Redux Toolkit and the React Redux hooks API
- A "feature folder" structure with single-file "slices" for Redux logic
- Async logic, data fetching, and loading state
- CRUD operations
- Normalized state
Run the Redux Essentials example:
Redux fundamentals
Run the Redux fundamentals example:
Universal
Run the Universal example:
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:
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.
More Examples
You can find more examples in the Redux Apps and Examples page of the Redux Addons Catalog.