REDUX middleware

 const middleware = [thunk]
if  (process.env.NODE_ENV !== 'production') {
 middleware.push(createLogger ())
}

< span class="keyword">const store = createStore(
 reducer,
 applyMiddleware( ...middleware)
)

render(
 
 < br> </Provider>,
 document.getElementById('root')
)

 
 const store = createStore(...args)
 let dispatch = () => {
 throw new Error span>(
 'Dispatching while constructing your middleware is not allowed.' +
 'Other middleware would not be applied to this dispatch.'
 )
 }

 const middlewareAPI = {
 getState: store.getState,
 dispatch: (...args) => dispatch(...args)
 }
 const chain = middlewares.map(middleware => middleware(middlewareAPI))
 dispatch = compose(...chain)(store.dispatch)
 
 return {
 ...store,
 dispatch
 }


 In this way, after the compose method is processed, the store returns an enhanced dispatch method
Let’s see how the compose method is

compose(f, g, h) <===> (... args) => f(g(h(...args)))

function (...funcs) {< /span>
 if (funcs.length === 0) {< /span>
 return arg =>  arg
 }

 if (funcs.length === 1) {
 return funcs[0]
 }
 
 return funcs.reduce((a, b) => (...args) => a(b(...args))) 
}

 // Example
function double(x) { return 2{ return 2 span> * x }
function square (x) { return x * x }
let testCompose = compose(double, square)(5< /span>) // 50

< span class="function">function createThunkMiddleware(extraArgument)  span>{
 return ({ dispatch , getState }) => next => action => {
 if (typeof action === 'function') {
 return action(dispatch, getState, extraArgument);
 }

 return next (action);
 };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

// next => action => {}
{
 getState: store.getState, 
 dispatch: (...args) => dispatch(...args)
}

// next <==> store.dispatch transformed dispatch
// middleware execution order[ thunk, logger]

if action is a function, thunk middleware will intercept execution action,
If action is an object, execute next method, next is thunk next middleware action => {... },
Because action is normally an object under normal circumstances, the method will always be executed according to the middleware array order

 action => {
 if (typeof  action === 'function') {
 return< /span> action(dispatch, getState, extraArgument);
 }

 return next(action); 
}

Here is a little question Is action(dispatch, getState, extraArgument)

The dispatch in action is an empty method, but Finally, applyMiddleWare dispatch will be overwritten at the end
The previous v3 dispatch is store.dispatch, and the later v4 dispatch is changed to an empty method, then here is dispatch< br>The method has no dispatch function, please refer to this [issue](https://github.com/reduxjs/redux/issues/1485) 
If you still understand what is here, welcome to communicate

({dispatch, getState}) => next => action => {
 try { 
 console.log('log')
 next(action)
} catch (err) {< /span>
 console.error('Error!', err)< /span>
 }
}