Skip to content

Commit e8a39fe

Browse files
committed
Update docs for getDefaultMiddleware
1 parent 0789c4f commit e8a39fe

File tree

2 files changed

+74
-3
lines changed

2 files changed

+74
-3
lines changed

docs/api/configureStore.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function configureStore({
1414
// A single reducer function that will be used as the root reducer,
1515
// or an object of slice reducers that will be passed to combineReducers()
1616
reducer: Object<string, Function> | Function,
17-
// An array of Redux middlewares. If not supplied, defaults to just redux-thunk.
17+
// An array of Redux middlewares. If not supplied, adds the middleware returned by getDefaultMiddleware()
1818
middleware: Array<MiddlewareFunction>,
1919
// Built-in support for devtools. Defaults to true.
2020
devTools: boolean,

docs/api/getDefaultMiddleware.md

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,77 @@ hide_title: true
77

88
# `getDefaultMiddleware`
99

10-
`getDefaultMiddleware` is useful if you need to add custom middlewares without removing `redux-starter-kit`'s default middleware.
10+
Returns an array containing the default list of middleware.
1111

12-
Currently it returns an array with `redux-thunk`.
12+
## Intended Usage
13+
14+
By default, [`configureStore`](./configureStore.md) adds some middleware to the Redux store setup automatically.
15+
16+
```js
17+
const store = configureStore({
18+
reducer : rootReducer,
19+
})
20+
21+
// Store has one or more middleware added, because the middleware list was not customized
22+
```
23+
24+
If you want to customize the list of middleware, you can supply an array of middleware functions to `configureStore`:
25+
26+
```js
27+
const store = configureStore({
28+
reducer : rootReducer,
29+
middleware : [thunk, logger],
30+
})
31+
32+
// Store specifically has the thunk and logger middleware applied
33+
```
34+
35+
However, when you supply the `middleware` option, you are responsible for defining _all_ the middleware you want added
36+
to the store. `configureStore` will not add any extra middleware beyond what you listed.
37+
38+
`getDefaultMiddleware` is useful if you want to add some custom middleware, but also still want to have the default
39+
middleware added as well:
40+
41+
```js
42+
const store = configureStore({
43+
reducer : rootReducer,
44+
middleware: [...getDefaultMiddleware(), logger]
45+
})
46+
47+
// Store has all of the default middleware added, _plus_ the logger middleware
48+
```
49+
50+
51+
## Included Default Middleware
52+
53+
### Development
54+
55+
One of the goals of `redux-starter-kit` is to provide opinionated defaults and prevent common mistakes. As part of that,
56+
`getDefaultMiddleware` includes some middleware that are added **in development builds of your app only** to
57+
provide runtime checks for two common issues:
58+
59+
- [`redux-immutable-state-invariant`](https://github.com/leoasis/redux-immutable-state-invariant): deeply compares
60+
state values for mutations. It can detect mutations in reducers during a dispatch, and also mutations that occur between
61+
dispatches (such as in a component or a selector). When a mutation is detect, it will throw an error and indicate the key
62+
path for where the mutated value was detected in the state tree.
63+
- `serializable-state-invariant-middleware`: a custom middleware created specifically for use in `redux-starter-kit`. Similar in
64+
concept to `redux-immutable-state-invariant`, but deeply checks In adyour state tree and your actions for non-serializable values
65+
such as functions, Promises, Symbols, and other non-plain-JS-data values. When a non-serializable value is detected, a
66+
console error will be printed with the key path for where the non-serializable value was detected.
67+
68+
In addition to these development tool middleware, it also adds [`redux-thunk`](https://github.com/reduxjs/redux-thunk)
69+
by default, since thunks are the basic recommended side effects middleware for Redux.
70+
71+
Currently, the return value is:
72+
73+
```js
74+
[immutableStateInvariant, thunk, serializableStateInvariant]
75+
```
76+
77+
### Production
78+
79+
Currently, the return value is:
80+
81+
```js
82+
[thunk]
83+
```

0 commit comments

Comments
 (0)