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
Copy file name to clipboardExpand all lines: docs/introduction/Examples.md
+17-1Lines changed: 17 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Examples
2
2
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.
4
4
5
5
## Counter Vanilla
6
6
@@ -29,6 +29,8 @@ npm start
29
29
open http://localhost:3000/
30
30
```
31
31
32
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/counter).
33
+
32
34
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.
33
35
34
36
This example includes tests.
@@ -47,6 +49,8 @@ npm start
47
49
open http://localhost:3000/
48
50
```
49
51
52
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos).
53
+
50
54
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.
51
55
52
56
This example includes tests.
@@ -65,6 +69,8 @@ npm start
65
69
open http://localhost:3000/
66
70
```
67
71
72
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos-with-undo).
73
+
68
74
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.
69
75
70
76
## TodoMVC
@@ -81,6 +87,8 @@ npm start
81
87
open http://localhost:3000/
82
88
```
83
89
90
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc).
91
+
84
92
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.
85
93
86
94
This example includes tests.
@@ -99,6 +107,8 @@ npm start
99
107
open http://localhost:3000/
100
108
```
101
109
110
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/shopping-cart).
111
+
102
112
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.
103
113
104
114
## Tree View
@@ -115,6 +125,8 @@ npm start
115
125
open http://localhost:3000/
116
126
```
117
127
128
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/tree-view).
129
+
118
130
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.
119
131
120
132
This example includes tests.
@@ -133,6 +145,8 @@ npm start
133
145
open http://localhost:3000/
134
146
```
135
147
148
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/async).
149
+
136
150
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.
137
151
138
152
## Universal
@@ -165,6 +179,8 @@ npm start
165
179
open http://localhost:3000/
166
180
```
167
181
182
+
Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/real-world).
183
+
168
184
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.
0 commit comments