Redux-saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga: Redux-Saga

Using middleware

Take log output middleware as an example

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

Copy the code

Logger middleware code

Function create (options = {}) {··· return store => next => (action) => {····· let fetch Value; returnedValue = next(action); return returnedValue; }; }Copy the code

The return format is store => next => Action =>{}.

applyMiddleware

We looked at applyMiddleware a bit in the previous article, but we’ll revisit it a bit

1. export default function applyMiddleware(... middlewares) { 2. return createStore => (... // createStore 4. Const store = createStore(... Call dispatch = () => {7. Throw new Error(8. 'Dispatching while constructing your middleware is not allowed. ' + 9. 'Other middleware would not be applied to this dispatch.' 10. ) 11. } 12. 13. const middlewareAPI = { 14. getState: store.getState, 15. dispatch: (... args) => dispatch(... } 17. // Inject store.getState and dispatch into each middleware Middleware (middlewareAPI) 19. // Call compose and reassign the middleware extension to compose. Chain)(store.dispatch) 21. // Returns store, extended dispatch 22. Return {23.... store, 24. dispatch 25. } 26. } 27. }Copy the code

Parse the three-tier function

As you can see from the outermost layer, store is middlewareAPI, getState and Dispatch,

const chain = middlewares.map(middleware => middleware(middlewareAPI))
Copy the code

So chain is the two remaining layers next => action =>{}, we see line 20,

dispatch = compose(... chain)(store.dispatch)Copy the code

Here chain is passed into compose as an argument. Compose is essentially a circular call to the middleware, which was mentioned less often in the previous article

const func = [f1, f2, f3]; compose(... func) //return f1(f2(f3(... Args))) // Note that the order of function calls is left to right, namely: F1 -> F2 -> F3Copy the code

You can see that next is actually store.dispatch, so after layer upon layer parsing, you can see that what is returned is actually a Logger wrapped dispatch

(action) => {
    let returnedValue = store.dispatch(action); // 这里的next就是store.dispatch
    return returnedValue;
};
Copy the code

We’re only using one middleware here, so you can think about what multiple middleware looks like, which is essentially a circular call, right

dispatch = f1(f2(f3(store.dispatch)));
Copy the code

conclusion

Without middleware we would simply call store.dispatch(Action), but we would need to do some processing or transformation on the action, such as asynchronous operation, asynchronous callback and next; This design is still very clever, you can be interested in understanding.