Skip to content

Commit 9625235

Browse files
authored
Merge pull request #3931 from reduxjs/docs/middleware
2 parents 7e94950 + 3201b8a commit 9625235

File tree

3 files changed

+506
-2
lines changed

3 files changed

+506
-2
lines changed

docs/tutorials/fundamentals/part-1-overview.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,12 @@ Let's look at a minimal working example of a Redux app - a small counter applica
150150
151151
Because Redux is a standalone JS library with no dependencies, this example is written by only loading a single script tag for the Redux library, and uses basic JS and HTML for the UI. In practice, Redux is normally used by [installing the Redux packages from NPM](../../introduction/Installation.md), and the UI is created using a library like [React](https://reactjs.org).
152152

153+
:::info
154+
155+
[Part 5: UI and React](./part-5-ui-and-react.md) shows how to use Redux and React together.
156+
157+
:::
158+
153159
Let's break this example down into its separate parts to see what's happening.
154160

155161
#### State, Actions, and Reducers
@@ -296,7 +302,13 @@ after a delay.
296302

297303
### Data Flow
298304

299-
We can summarize the flow of data through a Redux app with this diagram:
305+
We can summarize the flow of data through a Redux app with this diagram. It represents how:
306+
307+
- actions are dispatched in response to a user interaction like a click
308+
- the store runs the reducer function to calculate a new state
309+
- the UI reads the new state to display the new values
310+
311+
(Don't worry if these pieces aren't quite clear yet! Keep this picture in your mind as you go through the rest of this tutorial, and you'll see how the pieces fit together.)
300312

301313
![Redux data flow diagram](/img/tutorials/essentials/ReduxDataFlowDiagram.gif)
302314

0 commit comments

Comments
 (0)