Skip to content

Commit c1953b0

Browse files
CompuIvestimdorr
authored andcommitted
Add sandboxes to the examples in the docs (reduxjs#2487)
1 parent 6ca30fb commit c1953b0

File tree

1 file changed

+17
-1
lines changed

1 file changed

+17
-1
lines changed

docs/introduction/Examples.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Examples
22

3-
Redux is distributed with a few examples in its [source code](https://github.com/reactjs/redux/tree/master/examples).
3+
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), this is an online editor that lets you play with the examples online.
44

55
## Counter Vanilla
66

@@ -29,6 +29,8 @@ npm start
2929
open http://localhost:3000/
3030
```
3131

32+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/counter).
33+
3234
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.
3335

3436
This example includes tests.
@@ -47,6 +49,8 @@ npm start
4749
open http://localhost:3000/
4850
```
4951

52+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos).
53+
5054
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.
5155

5256
This example includes tests.
@@ -65,6 +69,8 @@ npm start
6569
open http://localhost:3000/
6670
```
6771

72+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos-with-undo).
73+
6874
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.
6975

7076
## TodoMVC
@@ -81,6 +87,8 @@ npm start
8187
open http://localhost:3000/
8288
```
8389

90+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc).
91+
8492
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.
8593

8694
This example includes tests.
@@ -99,6 +107,8 @@ npm start
99107
open http://localhost:3000/
100108
```
101109

110+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/shopping-cart).
111+
102112
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.
103113

104114
## Tree View
@@ -115,6 +125,8 @@ npm start
115125
open http://localhost:3000/
116126
```
117127

128+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/tree-view).
129+
118130
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.
119131

120132
This example includes tests.
@@ -133,6 +145,8 @@ npm start
133145
open http://localhost:3000/
134146
```
135147

148+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/async).
149+
136150
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.
137151

138152
## Universal
@@ -165,6 +179,8 @@ npm start
165179
open http://localhost:3000/
166180
```
167181

182+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/real-world).
183+
168184
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.
169185

170186
## More Examples

0 commit comments

Comments
 (0)