Fix redux-thunk imports in docs examples (#4779)

Author: sinyakov

docs/api/applyMiddleware.md

@@ -71,7 +71,7 @@ store.dispatch({
 
 ```js
 import { createStore, combineReducers, applyMiddleware } from 'redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import * as reducers from './reducers'
 
 const reducer = combineReducers(reducers)

docs/api/compose.md

@@ -36,7 +36,7 @@ This example demonstrates how to use `compose` to enhance a [store](Store.md) wi
 
 ```js
 import { createStore, applyMiddleware, compose } from 'redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import DevTools from './containers/DevTools'
 import reducer from '../reducers'
 

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

@@ -203,12 +203,12 @@ Once it's installed, we can update the Redux store in our todo app to use that m
 ```js title="src/store.js"
 import { createStore, applyMiddleware } from 'redux'
 // highlight-next-line
-import thunkMiddleware from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import { composeWithDevTools } from 'redux-devtools-extension'
 import rootReducer from './reducer'
 
 // highlight-next-line
-const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware))
+const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
 
 // The store now has the ability to accept thunk functions in `dispatch`
 const store = createStore(rootReducer, composedEnhancer)

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

@@ -100,11 +100,11 @@ export default rootReducer
 
 ```js title="src/store.js"
 import { createStore, applyMiddleware } from 'redux'
-import thunkMiddleware from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import { composeWithDevTools } from 'redux-devtools-extension'
 import rootReducer from './reducer'
 
-const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware))
+const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
 
 const store = createStore(rootReducer, composedEnhancer)
 export default store

docs/usage/ConfiguringYourStore.md

@@ -94,7 +94,7 @@ export default monitorReducerEnhancer
 Let's add these to our existing `index.js`.
 
 - First, we need to import `redux-thunk` plus our `loggerMiddleware` and `monitorReducerEnhancer`, plus two extra functions provided by Redux: `applyMiddleware` and `compose`.
-- We then use `applyMiddleware` to create a store enhancer which will apply our `loggerMiddleware` and the `thunkMiddleware` to the store's dispatch function.
+- We then use `applyMiddleware` to create a store enhancer which will apply our `loggerMiddleware` and the `thunk` middleware to the store's dispatch function.
 - Next, we use `compose` to compose our new `middlewareEnhancer` and our `monitorReducerEnhancer` into one function.
 
   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'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { applyMiddleware, createStore, compose } from 'redux'
-import thunkMiddleware from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import rootReducer from './reducers'
 import loggerMiddleware from './middleware/logger'
 import monitorReducerEnhancer from './enhancers/monitorReducer'
 import App from './components/App'
 
-const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunkMiddleware)
+const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunk)
 const composedEnhancers = compose(middlewareEnhancer, monitorReducerEnhancer)
 
 const store = createStore(rootReducer, undefined, composedEnhancers)
@@ -160,14 +160,14 @@ To achieve this, `configureStore` function looks like this:
 
 ```js
 import { applyMiddleware, compose, createStore } from 'redux'
-import thunkMiddleware from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 
 import monitorReducersEnhancer from './enhancers/monitorReducers'
 import loggerMiddleware from './middleware/logger'
 import rootReducer from './reducers'
 
 export default function configureStore(preloadedState) {
-  const middlewares = [loggerMiddleware, thunkMiddleware]
+  const middlewares = [loggerMiddleware, thunk]
   const middlewareEnhancer = applyMiddleware(...middlewares)
 
   const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
@@ -217,15 +217,15 @@ The final code looks like this:
 
 ```js
 import { applyMiddleware, createStore } from 'redux'
-import thunkMiddleware from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import { composeWithDevTools } from 'redux-devtools-extension'
 
 import monitorReducersEnhancer from './enhancers/monitorReducers'
 import loggerMiddleware from './middleware/logger'
 import rootReducer from './reducers'
 
 export default function configureStore(preloadedState) {
-  const middlewares = [loggerMiddleware, thunkMiddleware]
+  const middlewares = [loggerMiddleware, thunk]
   const middlewareEnhancer = applyMiddleware(...middlewares)
 
   const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
@@ -255,14 +255,14 @@ First, let's add it to our `configureStore` function:
 
 ```js
 import { applyMiddleware, compose, createStore } from 'redux'
-import thunkMiddleware from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 
 import monitorReducersEnhancer from './enhancers/monitorReducers'
 import loggerMiddleware from './middleware/logger'
 import rootReducer from './reducers'
 
 export default function configureStore(preloadedState) {
-  const middlewares = [loggerMiddleware, thunkMiddleware]
+  const middlewares = [loggerMiddleware, thunk]
   const middlewareEnhancer = applyMiddleware(...middlewares)
 
   const enhancers = [middlewareEnhancer, monitorReducersEnhancer]

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

@@ -65,7 +65,7 @@ Here's what those steps might look like in an existing application:
 
 ```js title="src/app/store.js"
 import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 
 import postsReducer from '../reducers/postsReducer'
 import usersReducer from '../reducers/usersReducer'

docs/usage/writing-logic-thunks.mdx

@@ -163,11 +163,11 @@ In other words:
 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:
 
 ```js title="Thunk setup with an extra argument"
-import thunkMiddleware from 'redux-thunk'
+import { withExtraArgument } from 'redux-thunk'
 
 const serviceApi = createServiceApi('/some/url')
 
-const thunkMiddlewareWithArg = thunkMiddleware.withExtraArgument({ serviceApi })
+const thunkMiddlewareWithArg = withExtraArgument({ serviceApi })
 ```
 
 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

@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import { createLogger } from 'redux-logger'
 import reducer from './reducers'
 import App from './containers/App'

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

@@ -1,5 +1,5 @@
 import { createStore, applyMiddleware, compose } from 'redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import { createLogger } from 'redux-logger'
 import api from '../middleware/api'
 import rootReducer from '../reducers'

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

@@ -1,5 +1,5 @@
 import { createStore, applyMiddleware } from 'redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import api from '../middleware/api'
 import rootReducer from '../reducers'
 

examples/shopping-cart/src/index.js

@@ -3,7 +3,7 @@ import { render } from 'react-dom'
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import { createLogger } from 'redux-logger'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import reducer from './reducers'
 import { getAllProducts } from './actions'
 import App from './containers/App'

examples/universal/common/store/configureStore.js

@@ -1,5 +1,5 @@
 import { createStore, applyMiddleware } from 'redux'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
 import rootReducer from '../reducers'
 
 const configureStore = preloadedState => {