@@ -7,6 +7,77 @@ hide_title: true
7
7
8
8
# ` getDefaultMiddleware `
9
9
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.
11
11
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