You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Add a package.json to counter-vanilla for CodeSandbox use
* Fix example links and add first sandbox embed
* Try adding Parcel setup for counter-vanilla
* Add counter-vanilla sandbox with temp branch link
* Add sandboxes for other examples
* Add counter-vanilla README
* Format readme
* Remove todos-flow embed due to compile issues
Copy file name to clipboardexpand all lines: docs/introduction/Examples.md
+54-35
Original file line number
Diff line number
Diff line change
@@ -7,81 +7,89 @@ hide_title: true
7
7
8
8
# Examples
9
9
10
-
Redux is distributed with a few examples in its [source code](https://github.com/reactjs/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.
10
+
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.
11
11
12
12
## Counter Vanilla
13
13
14
-
Run the [Counter Vanilla](https://github.com/reactjs/redux/tree/master/examples/counter-vanilla) example:
14
+
Run the [Counter Vanilla](https://github.com/reduxjs/redux/tree/master/examples/counter-vanilla) example:
15
15
16
16
```sh
17
-
git clone https://github.com/reactjs/redux.git
17
+
git clone https://github.com/reduxjs/redux.git
18
18
19
19
cd redux/examples/counter-vanilla
20
20
open index.html
21
21
```
22
22
23
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter-vanilla):
It does not require a build system or a view framework and exists to show the raw Redux API used with ES5.
24
28
25
29
## Counter
26
30
27
-
Run the [Counter](https://github.com/reactjs/redux/tree/master/examples/counter) example:
31
+
Run the [Counter](https://github.com/reduxjs/redux/tree/master/examples/counter) example:
28
32
29
33
```sh
30
-
git clone https://github.com/reactjs/redux.git
34
+
git clone https://github.com/reduxjs/redux.git
31
35
32
36
cd redux/examples/counter
33
37
npm install
34
38
npm start
35
39
```
36
40
37
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/counter):
41
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter):
38
42
39
-
{% embed data="{\"url\":\"https://codesandbox.io/embed/github/reactjs/redux/tree/master/examples/counter\",\"type\":\"link\",\"title\":\"CodeSandbox\",\"description\":\"CodeSandbox is an online editor tailored for web applications.\",\"icon\":{\"type\":\"icon\",\"url\":\"https://codesandbox.io/favicon.ico\",\"aspectRatio\":0},\"thumbnail\":{\"type\":\"thumbnail\",\"url\":\"https://codesandbox.io/static/img/banner.png\",\"width\":1200,\"height\":630,\"aspectRatio\":0.525}}" %}
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/reactjs/react-redux) bindings instead.
45
+
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.
42
46
43
47
This example includes tests.
44
48
45
49
## Todos
46
50
47
-
Run the [Todos](https://github.com/reactjs/redux/tree/master/examples/todos) example:
51
+
Run the [Todos](https://github.com/reduxjs/redux/tree/master/examples/todos) example:
48
52
49
53
```sh
50
-
git clone https://github.com/reactjs/redux.git
54
+
git clone https://github.com/reduxjs/redux.git
51
55
52
56
cd redux/examples/todos
53
57
npm install
54
58
npm start
55
59
```
56
60
57
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos).
61
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos):
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/reactjs/react-redux) to generate container components from your presentational components.
65
+
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.
60
66
61
67
This example includes tests.
62
68
63
69
## Todos with Undo
64
70
65
-
Run the [Todos with Undo](https://github.com/reactjs/redux/tree/master/examples/todos-with-undo) example:
71
+
Run the [Todos with Undo](https://github.com/reduxjs/redux/tree/master/examples/todos-with-undo) example:
66
72
67
73
```sh
68
-
git clone https://github.com/reactjs/redux.git
74
+
git clone https://github.com/reduxjs/redux.git
69
75
70
76
cd redux/examples/todos-with-undo
71
77
npm install
72
78
npm start
73
79
```
74
80
75
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos-with-undo).
81
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos-with-undo):
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.
78
86
79
87
## Todos w/ Flow
80
88
81
-
Run the [Todos w/ Flow](https://github.com/reactjs/redux/tree/master/examples/todos-flow) example:
89
+
Run the [Todos w/ Flow](https://github.com/reduxjs/redux/tree/master/examples/todos-flow) example:
82
90
83
91
```sh
84
-
git clone https://github.com/reactjs/redux.git
92
+
git clone https://github.com/reduxjs/redux.git
85
93
86
94
cd redux/examples/todos-flow
87
95
npm install
@@ -92,78 +100,86 @@ This is like the previous Todos examples, but shows how to use Redux in conjunct
92
100
93
101
## TodoMVC
94
102
95
-
Run the [TodoMVC](https://github.com/reactjs/redux/tree/master/examples/todomvc) example:
103
+
Run the [TodoMVC](https://github.com/reduxjs/redux/tree/master/examples/todomvc) example:
96
104
97
105
```sh
98
-
git clone https://github.com/reactjs/redux.git
106
+
git clone https://github.com/reduxjs/redux.git
99
107
100
108
cd redux/examples/todomvc
101
109
npm install
102
110
npm start
103
111
```
104
112
105
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc).
113
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todomvc):
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.
108
118
109
119
This example includes tests.
110
120
111
121
## Shopping Cart
112
122
113
-
Run the [Shopping Cart](https://github.com/reactjs/redux/tree/master/examples/shopping-cart) example:
123
+
Run the [Shopping Cart](https://github.com/reduxjs/redux/tree/master/examples/shopping-cart) example:
114
124
115
125
```sh
116
-
git clone https://github.com/reactjs/redux.git
126
+
git clone https://github.com/reduxjs/redux.git
117
127
118
128
cd redux/examples/shopping-cart
119
129
npm install
120
130
npm start
121
131
```
122
132
123
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/shopping-cart).
133
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/shopping-cart):
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.
126
138
127
139
## Tree View
128
140
129
-
Run the [Tree View](https://github.com/reactjs/redux/tree/master/examples/tree-view) example:
141
+
Run the [Tree View](https://github.com/reduxjs/redux/tree/master/examples/tree-view) example:
130
142
131
143
```sh
132
-
git clone https://github.com/reactjs/redux.git
144
+
git clone https://github.com/reduxjs/redux.git
133
145
134
146
cd redux/examples/tree-view
135
147
npm install
136
148
npm start
137
149
```
138
150
139
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/tree-view).
151
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/tree-view):
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.
142
156
143
157
This example includes tests.
144
158
145
159
## Async
146
160
147
-
Run the [Async](https://github.com/reactjs/redux/tree/master/examples/async) example:
161
+
Run the [Async](https://github.com/reduxjs/redux/tree/master/examples/async) example:
148
162
149
163
```sh
150
-
git clone https://github.com/reactjs/redux.git
164
+
git clone https://github.com/reduxjs/redux.git
151
165
152
166
cd redux/examples/async
153
167
npm install
154
168
npm start
155
169
```
156
170
157
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/async).
171
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/async):
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.
160
176
161
177
## Universal
162
178
163
-
Run the [Universal](https://github.com/reactjs/redux/tree/master/examples/universal) example:
179
+
Run the [Universal](https://github.com/reduxjs/redux/tree/master/examples/universal) example:
164
180
165
181
```sh
166
-
git clone https://github.com/reactjs/redux.git
182
+
git clone https://github.com/reduxjs/redux.git
167
183
168
184
cd redux/examples/universal
169
185
npm install
@@ -174,20 +190,23 @@ This is a basic demonstration of [server rendering](../recipes/ServerRendering.m
174
190
175
191
## Real World
176
192
177
-
Run the [Real World](https://github.com/reactjs/redux/tree/master/examples/real-world) example:
193
+
Run the [Real World](https://github.com/reduxjs/redux/tree/master/examples/real-world) example:
178
194
179
195
```sh
180
-
git clone https://github.com/reactjs/redux.git
196
+
git clone https://github.com/reduxjs/redux.git
181
197
182
198
cd redux/examples/real-world
183
199
npm install
184
200
npm start
185
201
```
186
202
187
-
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/real-world).
203
+
Or check out the [sandbox](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/real-world):
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.
190
208
191
209
## More Examples
192
210
193
-
You can find more examples in [Awesome Redux](https://github.com/xgrommx/awesome-redux).
211
+
You can find more examples in the [Redux Apps and Examples](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md)
212
+
page of the [Redux Addons Catalog](https://github.com/markerikson/redux-ecosystem-links).
This example does not require a build system or a view framework, and exists to show the raw Redux API used with ES5.
4
+
5
+
As Dan said [in the original PR for this example]():
6
+
7
+
> The new Counter Vanilla example is aimed to dispel the myth that Redux requires Webpack, React, hot reloading, sagas, action creators, constants, Babel, npm, CSS modules, decorators, fluent Latin, an Egghead subscription, a PhD, or an Exceeds Expectations O.W.L. level.
8
+
>
9
+
> Nope, it's just HTML, some artisanal `<script>` tags, and plain old DOM manipulation. Enjoy!
10
+
11
+
To try this example, just download the HTML file and open it in your browser.
12
+
13
+
(The `package.json` in this folder only exists to allow using this folder as a CodeSandbox embed, and is not required
0 commit comments