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/advanced/Middleware.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
1
# Middleware
2
2
3
-
If you used server-side libraries like [Express](http://expressjs.com/) and [Koa](http://koajs.com/), you are familiar with a concept of *middleware*. In these frameworks, middleware is some code you can put between the framework receiving a request, and framework generating a response. For example, Express or Koa middleware may add CORS headers, logging, compression, and more. The best feature of middleware is that it’s composable in a chain. You can use multiple independent third-party middleware in a single project.
3
+
If you've used server-side libraries like [Express](http://expressjs.com/) and [Koa](http://koajs.com/), you are familiar with a concept of *middleware*. In these frameworks, middleware is some code you can put between the framework receiving a request, and framework generating a response. For example, Express or Koa middleware may add CORS headers, logging, compression, and more. The best feature of middleware is that it’s composable in a chain. You can use multiple independent third-party middleware in a single project.
4
4
5
5
Redux middleware solves different problems than Express or Koa middleware, but in a conceptually similar way. **It provides a third-party extension point between dispatching an action, and the moment it reaches the store.** People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.
6
6
7
-
This article is divided in an in-depth intro to help you grok the concept, and [a few practical examples](#seven-examples) to show the power of middleware at the very end. You may find it helpful to switch back and forth between them, as you flip between feeling bored and inspired.
7
+
This article is divided into an in-depth intro to help you grok the concept, and [a few practical examples](#seven-examples) to show the power of middleware at the very end. You may find it helpful to switch back and forth between them, as you flip between feeling bored and inspired.
8
8
9
9
>##### Note for the Impatient
10
10
11
-
>You will find some practical advice on using middleware for asynchronous actions [in the next section](AsyncActions.md). However we strongly advise you to resist the urge to skip this article.
11
+
>You will find some practical advice on using middleware for asynchronous actions [in the next section](AsyncActions.md). However we strongly advise you to resist the urge to skip this section.
12
12
13
13
>Middleware is the most “magical” part of Redux you are likely to encounter. Learning how it works and how to write your own is the best investment you can make into your productivity using Redux.
14
14
@@ -76,7 +76,7 @@ We could end this here, but it’s not very convenient to import a special funct
76
76
77
77
### Attempt #3: Monkeypatching Dispatch
78
78
79
-
What if we just replace the `dispatch` function on the store instance? Redux store is just a plain object with [a few methods](../api/Store.md), and we’re writing JavaScript, so we can just monkeypatch the `dispatch` implementation:
79
+
What if we just replace the `dispatch` function on the store instance? The Redux store is just a plain object with [a few methods](../api/Store.md), and we’re writing JavaScript, so we can just monkeypatch the `dispatch` implementation:
80
80
81
81
```js
82
82
let next =store.dispatch;
@@ -92,7 +92,7 @@ This is already closer to what we want! No matter where we dispatch an action,
92
92
93
93
### Problem: Crash Reporting
94
94
95
-
What if we want to apply **more then one** such transformation to `dispatch`?
95
+
What if we want to apply **more than one** such transformation to `dispatch`?
96
96
97
97
A different useful transformation that comes to my mind is reporting JavaScript errors in production. The global `window.onerror` event is not reliable because it doesn’t provide stack information in some older browsers, which is crucial to understand why an error is happening.
98
98
@@ -274,7 +274,7 @@ function applyMiddleware(store, middlewares) {
274
274
275
275
The implementation of [`applyMiddleware()`](../api/applyMiddleware.md) that ships with Redux is similar, but **different in three important aspects**:
276
276
277
-
* It only exposes a subset of [store API](../api/Store.md) to the middleware: [`dispatch(action)`](../api/Store.md#dispatch) and [`getState()`](../api/Store.
277
+
* It only exposes a subset of the [store API](../api/Store.md) to the middleware: [`dispatch(action)`](../api/Store.md#dispatch) and [`getState()`](../api/Store.
278
278
md#getState).
279
279
280
280
* It does a bit of trickery to make sure that if you call `store.dispatch(action)` from your middleware instead of `next(action)`, the action will actually travel the whole middleware chain again, including the current middleware. This is useful for asynchronous middleware, as we will see [later](AsyncActions.md).
@@ -326,7 +326,7 @@ let todoApp = combineReducers(reducers);
326
326
let store =createStoreWithMiddleware(todoApp);
327
327
```
328
328
329
-
This is it! Now any actions dispatched to the store instance will flow through `logger` and `crashReporter`:
329
+
That's it! Now any actions dispatched to the store instance will flow through `logger` and `crashReporter`:
330
330
331
331
```js
332
332
// Will flow through both logger and crashReporter middleware!
If your head boiled from reading the above section, imagine what it was like to write it. This part is meant to be a relaxation for you and me, and will help get your gears turning.
338
+
If your head boiled from reading the above section, imagine what it was like to write it. This section is meant to be a relaxation for you and me, and will help get your gears turning.
339
339
340
340
Each function below is a valid Redux middleware. They are not equally useful, but at least they are equally fun.
0 commit comments