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