Skip to content

Commit 9f3de74

Browse files
authored
Fix redux-thunk imports in docs examples (#4779)
1 parent 7130024 commit 9f3de74

File tree

12 files changed

+23
-23
lines changed

12 files changed

+23
-23
lines changed

docs/api/applyMiddleware.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ store.dispatch({
7171

7272
```js
7373
import { createStore, combineReducers, applyMiddleware } from 'redux'
74-
import thunk from 'redux-thunk'
74+
import { thunk } from 'redux-thunk'
7575
import * as reducers from './reducers'
7676

7777
const reducer = combineReducers(reducers)

docs/api/compose.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ This example demonstrates how to use `compose` to enhance a [store](Store.md) wi
3636

3737
```js
3838
import { createStore, applyMiddleware, compose } from 'redux'
39-
import thunk from 'redux-thunk'
39+
import { thunk } from 'redux-thunk'
4040
import DevTools from './containers/DevTools'
4141
import reducer from '../reducers'
4242

docs/tutorials/fundamentals/part-6-async-logic.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -203,12 +203,12 @@ Once it's installed, we can update the Redux store in our todo app to use that m
203203
```js title="src/store.js"
204204
import { createStore, applyMiddleware } from 'redux'
205205
// highlight-next-line
206-
import thunkMiddleware from 'redux-thunk'
206+
import { thunk } from 'redux-thunk'
207207
import { composeWithDevTools } from 'redux-devtools-extension'
208208
import rootReducer from './reducer'
209209

210210
// highlight-next-line
211-
const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware))
211+
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
212212

213213
// The store now has the ability to accept thunk functions in `dispatch`
214214
const store = createStore(rootReducer, composedEnhancer)

docs/tutorials/fundamentals/part-8-modern-redux.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,11 @@ export default rootReducer
100100

101101
```js title="src/store.js"
102102
import { createStore, applyMiddleware } from 'redux'
103-
import thunkMiddleware from 'redux-thunk'
103+
import { thunk } from 'redux-thunk'
104104
import { composeWithDevTools } from 'redux-devtools-extension'
105105
import rootReducer from './reducer'
106106

107-
const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware))
107+
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
108108

109109
const store = createStore(rootReducer, composedEnhancer)
110110
export default store

docs/usage/ConfiguringYourStore.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default monitorReducerEnhancer
9494
Let's add these to our existing `index.js`.
9595

9696
- First, we need to import `redux-thunk` plus our `loggerMiddleware` and `monitorReducerEnhancer`, plus two extra functions provided by Redux: `applyMiddleware` and `compose`.
97-
- We then use `applyMiddleware` to create a store enhancer which will apply our `loggerMiddleware` and the `thunkMiddleware` to the store's dispatch function.
97+
- We then use `applyMiddleware` to create a store enhancer which will apply our `loggerMiddleware` and the `thunk` middleware to the store's dispatch function.
9898
- Next, we use `compose` to compose our new `middlewareEnhancer` and our `monitorReducerEnhancer` into one function.
9999

100100
This is needed because you can only pass one enhancer into `createStore`. To use multiple enhancers, you must first compose them into a single larger enhancer, as shown in this example.
@@ -106,13 +106,13 @@ import React from 'react'
106106
import { render } from 'react-dom'
107107
import { Provider } from 'react-redux'
108108
import { applyMiddleware, createStore, compose } from 'redux'
109-
import thunkMiddleware from 'redux-thunk'
109+
import { thunk } from 'redux-thunk'
110110
import rootReducer from './reducers'
111111
import loggerMiddleware from './middleware/logger'
112112
import monitorReducerEnhancer from './enhancers/monitorReducer'
113113
import App from './components/App'
114114

115-
const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunkMiddleware)
115+
const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunk)
116116
const composedEnhancers = compose(middlewareEnhancer, monitorReducerEnhancer)
117117

118118
const store = createStore(rootReducer, undefined, composedEnhancers)
@@ -160,14 +160,14 @@ To achieve this, `configureStore` function looks like this:
160160

161161
```js
162162
import { applyMiddleware, compose, createStore } from 'redux'
163-
import thunkMiddleware from 'redux-thunk'
163+
import { thunk } from 'redux-thunk'
164164

165165
import monitorReducersEnhancer from './enhancers/monitorReducers'
166166
import loggerMiddleware from './middleware/logger'
167167
import rootReducer from './reducers'
168168

169169
export default function configureStore(preloadedState) {
170-
const middlewares = [loggerMiddleware, thunkMiddleware]
170+
const middlewares = [loggerMiddleware, thunk]
171171
const middlewareEnhancer = applyMiddleware(...middlewares)
172172

173173
const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
@@ -217,15 +217,15 @@ The final code looks like this:
217217

218218
```js
219219
import { applyMiddleware, createStore } from 'redux'
220-
import thunkMiddleware from 'redux-thunk'
220+
import { thunk } from 'redux-thunk'
221221
import { composeWithDevTools } from 'redux-devtools-extension'
222222

223223
import monitorReducersEnhancer from './enhancers/monitorReducers'
224224
import loggerMiddleware from './middleware/logger'
225225
import rootReducer from './reducers'
226226

227227
export default function configureStore(preloadedState) {
228-
const middlewares = [loggerMiddleware, thunkMiddleware]
228+
const middlewares = [loggerMiddleware, thunk]
229229
const middlewareEnhancer = applyMiddleware(...middlewares)
230230

231231
const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
@@ -255,14 +255,14 @@ First, let's add it to our `configureStore` function:
255255

256256
```js
257257
import { applyMiddleware, compose, createStore } from 'redux'
258-
import thunkMiddleware from 'redux-thunk'
258+
import { thunk } from 'redux-thunk'
259259

260260
import monitorReducersEnhancer from './enhancers/monitorReducers'
261261
import loggerMiddleware from './middleware/logger'
262262
import rootReducer from './reducers'
263263

264264
export default function configureStore(preloadedState) {
265-
const middlewares = [loggerMiddleware, thunkMiddleware]
265+
const middlewares = [loggerMiddleware, thunk]
266266
const middlewareEnhancer = applyMiddleware(...middlewares)
267267

268268
const enhancers = [middlewareEnhancer, monitorReducersEnhancer]

docs/usage/migrating-to-modern-redux.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ Here's what those steps might look like in an existing application:
6565

6666
```js title="src/app/store.js"
6767
import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
68-
import thunk from 'redux-thunk'
68+
import { thunk } from 'redux-thunk'
6969

7070
import postsReducer from '../reducers/postsReducer'
7171
import usersReducer from '../reducers/usersReducer'

docs/usage/writing-logic-thunks.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -163,11 +163,11 @@ In other words:
163163
The thunk middleware does have one customization option. You can create a custom instance of the thunk middleware at setup time, and inject an "extra argument" into the middleware. The middleware will then inject that extra value as the third argument of every thunk function. This is most commonly used for injecting an API service layer into thunk functions, so that they don't have hardcoded dependencies on the API methods:
164164

165165
```js title="Thunk setup with an extra argument"
166-
import thunkMiddleware from 'redux-thunk'
166+
import { withExtraArgument } from 'redux-thunk'
167167

168168
const serviceApi = createServiceApi('/some/url')
169169

170-
const thunkMiddlewareWithArg = thunkMiddleware.withExtraArgument({ serviceApi })
170+
const thunkMiddlewareWithArg = withExtraArgument({ serviceApi })
171171
```
172172

173173
Redux Toolkit's `configureStore` supports [this as part of its middleware customization in `getDefaultMiddleware`](https://redux-toolkit.js.org/api/getDefaultMiddleware):

examples/async/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import { render } from 'react-dom'
33
import { createStore, applyMiddleware } from 'redux'
44
import { Provider } from 'react-redux'
5-
import thunk from 'redux-thunk'
5+
import { thunk } from 'redux-thunk'
66
import { createLogger } from 'redux-logger'
77
import reducer from './reducers'
88
import App from './containers/App'

examples/real-world/src/store/configureStore.dev.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createStore, applyMiddleware, compose } from 'redux'
2-
import thunk from 'redux-thunk'
2+
import { thunk } from 'redux-thunk'
33
import { createLogger } from 'redux-logger'
44
import api from '../middleware/api'
55
import rootReducer from '../reducers'

examples/real-world/src/store/configureStore.prod.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createStore, applyMiddleware } from 'redux'
2-
import thunk from 'redux-thunk'
2+
import { thunk } from 'redux-thunk'
33
import api from '../middleware/api'
44
import rootReducer from '../reducers'
55

examples/shopping-cart/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { render } from 'react-dom'
33
import { createStore, applyMiddleware } from 'redux'
44
import { Provider } from 'react-redux'
55
import { createLogger } from 'redux-logger'
6-
import thunk from 'redux-thunk'
6+
import { thunk } from 'redux-thunk'
77
import reducer from './reducers'
88
import { getAllProducts } from './actions'
99
import App from './containers/App'

examples/universal/common/store/configureStore.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createStore, applyMiddleware } from 'redux'
2-
import thunk from 'redux-thunk'
2+
import { thunk } from 'redux-thunk'
33
import rootReducer from '../reducers'
44

55
const configureStore = preloadedState => {

0 commit comments

Comments
 (0)