1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
---
id: examples
title: Examples
sidebar_label: Examples
hide_title: true
---
# Examples
Redux is distributed with a few examples in its [source code](https://github.com/reduxjs/redux/tree/master/examples). Most of these examples are also on [CodeSandbox](https://codesandbox.io), an online editor that lets you play with the examples online.
## Counter Vanilla
Run the [Counter Vanilla](https://github.com/reduxjs/redux/tree/master/examples/counter-vanilla) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-vanilla
open index.html
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter-vanilla):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/counter-vanilla" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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](https://github.com/reduxjs/redux/tree/master/examples/counter) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/counter" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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/reduxjs/react-redux) bindings instead.
This example includes tests.
## Todos
Run the [Todos](https://github.com/reduxjs/redux/tree/master/examples/todos) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/todos" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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/reduxjs/react-redux) to generate container components from your presentational components.
This example includes tests.
## Todos with Undo
Run the [Todos with Undo](https://github.com/reduxjs/redux/tree/master/examples/todos-with-undo) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-with-undo
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos-with-undo):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/todos-with-undo" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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/omnidan/redux-undo) lets you add a Undo/Redo functionality to your app with a few lines of code.
## Todos w/ Flow
Run the [Todos w/ Flow](https://github.com/reduxjs/redux/tree/master/examples/todos-flow) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-flow
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos-flow):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/todos-flow" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
This is like the previous Todos examples, but shows how to use Redux in conjunction with [Flow](https://flow.org/).
## TodoMVC
Run the [TodoMVC](https://github.com/reduxjs/redux/tree/master/examples/todomvc) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todomvc
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todomvc):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/todomvc" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
This is the classical [TodoMVC](http://todomvc.com/) 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](https://github.com/reduxjs/redux/tree/master/examples/shopping-cart) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/shopping-cart
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/shopping-cart):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/shopping-cart" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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/fcomb/redux-logger) and conditional dispatching of actions with [Redux Thunk](https://github.com/gaearon/redux-thunk) middleware.
## Tree View
Run the [Tree View](https://github.com/reduxjs/redux/tree/master/examples/tree-view) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/tree-view
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/tree-view):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/tree-view" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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](https://github.com/reduxjs/redux/tree/master/examples/async) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/async
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/async):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/async" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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/gaearon/redux-thunk) middleware to encapsulate asynchronous side effects.
## Universal
Run the [Universal](https://github.com/reduxjs/redux/tree/master/examples/universal) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/universal
npm install
npm start
```
This is a basic demonstration of [server rendering](../recipes/ServerRendering.md) 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](https://github.com/reduxjs/redux/tree/master/examples/real-world) example:
```sh
git clone https://github.com/reduxjs/redux.git
cd redux/examples/real-world
npm install
npm start
```
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/real-world):
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/real-world" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
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](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md)
page of the [Redux Addons Catalog](https://github.com/markerikson/redux-ecosystem-links).
|
