Skip to content

Commit a72c77f

Browse files
committed
Update docs
1 parent 77e0179 commit a72c77f

File tree

6 files changed

+16
-22
lines changed

6 files changed

+16
-22
lines changed

docs/api/actionCreatorMiddleware.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,6 @@ const actionCreatorMiddleware = createActionCreatorInvariantMiddleware({
6363

6464
const store = configureStore({
6565
reducer,
66-
middleware: new Tuple(actionCreatorMiddleware),
66+
middleware: () => new Tuple(actionCreatorMiddleware),
6767
})
6868
```

docs/api/configureStore.mdx

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,15 @@ If it is an object of slice reducers, like `{users : usersReducer, posts : posts
100100

101101
### `middleware`
102102

103-
An optional array of Redux middleware functions, or a callback to customise the array of middleware.
103+
A callback which will receive `getDefaultMiddleware` as its argument,
104+
and should return a middleware array.
104105

105-
If this option is provided, it should contain all the middleware functions you
106+
If this option is provided, it should return all the middleware functions you
106107
want added to the store. `configureStore` will automatically pass those to `applyMiddleware`.
107108

108109
If not provided, `configureStore` will call `getDefaultMiddleware` and use the
109110
array of middleware functions it returns.
110111

111-
Where you wish to add onto or customize the default middleware,
112-
you may pass a callback function that will receive `getDefaultMiddleware` as its argument,
113-
and should return a middleware array.
114-
115112
For more details on how the `middleware` parameter works and the list of middleware that are added by default, see the
116113
[`getDefaultMiddleware` docs page](./getDefaultMiddleware.mdx).
117114

@@ -123,7 +120,7 @@ import { configureStore, Tuple } from '@reduxjs/toolkit'
123120
124121
configureStore({
125122
reducer: rootReducer,
126-
middleware: new Tuple(additionalMiddleware, logger),
123+
middleware: () => new Tuple(additionalMiddleware, logger),
127124
})
128125
```
129126

@@ -178,11 +175,6 @@ If you provide an array, this `applyMiddleware` enhancer will _not_ be used.
178175
`configureStore` will warn in console if any middleware are provided (or left as default) but not included in the final list of enhancers.
179176
180177
```ts no-transpile
181-
// warns - middleware left as default but not included in final enhancers
182-
configureStore({
183-
reducer,
184-
enhancers: [offline(offlineConfig)],
185-
})
186178
// warns - middleware customised but not included in final enhancers
187179
configureStore({
188180
reducer,
@@ -199,8 +191,8 @@ configureStore({
199191
// also allowed
200192
configureStore({
201193
reducer,
202-
middleware: [],
203-
enhancers: [offline(offlineConfig)],
194+
middleware: () => [],
195+
enhancers: () => [offline(offlineConfig)],
204196
})
205197
```
206198

@@ -209,20 +201,22 @@ configureStore({
209201
:::note Tuple
210202
Typescript users are required to use a `Tuple` instance (if not using a `getDefaultEnhancer` result, which is already a `Tuple`), for better inference.
211203

204+
```
212205
import { configureStore, Tuple } from '@reduxjs/toolkit'
213206

214207
configureStore({
215208
reducer: rootReducer,
216-
enhancers: new Tuple(offline),
209+
enhancers: () => new Tuple(offline),
217210
})
218211

219-
````
212+
```
220213
221214
Javascript-only users are free to use a plain array if preferred.
222215
223216
:::
224217
225218
## Usage
219+
226220
### Basic Example
227221
228222
```ts
@@ -238,7 +232,7 @@ import rootReducer from './reducers'
238232

239233
const store = configureStore({ reducer: rootReducer })
240234
// The store now has redux-thunk added and the Redux DevTools Extension is turned on
241-
````
235+
```
242236
243237
### Full Example
244238

docs/api/getDefaultMiddleware.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ If you want to customize the list of middleware, you can supply an array of midd
2828
```js
2929
const store = configureStore({
3030
reducer: rootReducer,
31-
middleware: new Tuple(thunk, logger),
31+
middleware: () => new Tuple(thunk, logger),
3232
})
3333

3434
// Store specifically has the thunk and logger middleware applied

docs/api/immutabilityMiddleware.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const immutableInvariantMiddleware = createImmutableStateInvariantMiddleware({
8686
const store = configureStore({
8787
reducer: exampleSliceReducer,
8888
// Note that this will replace all default middleware
89-
middleware: new Tuple(immutableInvariantMiddleware),
89+
middleware: () => new Tuple(immutableInvariantMiddleware),
9090
})
9191
```
9292

docs/api/serializabilityMiddleware.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const serializableMiddleware = createSerializableStateInvariantMiddleware({
111111

112112
const store = configureStore({
113113
reducer,
114-
middleware: new Tuple(serializableMiddleware),
114+
middleware: () => new Tuple(serializableMiddleware),
115115
})
116116
```
117117

docs/usage/usage-with-typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ import { configureStore, Tuple } from '@reduxjs/toolkit'
145145

146146
configureStore({
147147
reducer: rootReducer,
148-
middleware: new Tuple(additionalMiddleware, logger),
148+
middleware: () => new Tuple(additionalMiddleware, logger),
149149
})
150150
```
151151

0 commit comments

Comments
 (0)