Comparison of Middleware mechanisms in Redux,Koa,Express

Koa, as we all know, is an agile development framework that the original Express team has redeveloped based on new ES6 features. Express is primarily based on the Connect middleware framework, which encapsulates a lot of functionality in itself, such as routing and requests. While Koa is based on CO (KOA2 is based on async/await) middleware framework, the framework itself does not integrate too many functions, most functions need to be solved by the user require middleware. Let’s start by comparing Koa with Express:

//Express var express = require('express') var app = express() app.get('/',(req,res)=>{ res.send('Hello Express! ') }) app.listen(3000)Copy the code

//Koa
var koa = require('koa')
var app = koa()
var route = require('koa-route')
app.use(route.get('/',async (ctx) => {
    ctx.body = 'Hello Koa'
}))
app.listen(3000)Copy the code

Redux expands with middleware that includes custom functionality. Middleware lets you wrap a store’s dispatch method to do what you want. Middleware also has a key feature called “compose.” (More on this later) More than one middleware can be combined to form a chain. Each middleware doesn’t need to know anything about the middleware before or after it in the chain.

Such as:

const logger = ()=>{
    // ...
}
const crashReporter = ()=>{
    // ...
}
const thunk = () =>{
    // ...
}
let store = createStore(
  App,
  applyMiddleware(
    crashReporter,
    thunk,
    logger
  )
)Copy the code

Express is more like sequential execution of middleware, called a linear model

Left -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | middleware1 | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- left -- -- -- -- -- -- -- -- -- -- -- -- -- -- - |... . . | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- left -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | middlewareN | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- leftCopy the code

Express middleware maintains an array of functions that need to be executed before a response is sent. After each use, the middleware is pushed into the array. After execution, the next method is called to execute the next function of the function. If no call is made, the call terminates. Let’s implement a simple Express middleware feature

Function express() {var funcs = [] var app = function (req, Function next() {var task = funcs[I ++] if (! Task) {// If the middleware does not exist,return return} task(req, res, next); App.use = function (task) {funcs.push(task); funcs.push(task); } return app // return instance}Copy the code

“It provides a third-party extension point between Dispatching an action,and the moment It reaches the reducer” This is how redux’s author describes it.

Because of redux’s single-source nature, data flows from the top, and middleware acts as a conduit to support that flow, with different conduits having different features and functions.

Each Middleware function takes the Store’s dispatch and getState functions as named arguments and returns a function. This function is passed into the next Middleware dispatch method called Next and returns a new function that receives an action, which can call Next (Action) directly, at any other time needed, or not call it at all. The last middleware in the call chain accepts the actual Store’s dispatch method as the next argument and ends the call chain.

Redux-thunk Middleware redux-Thunk Middleware redux-Thunk Middleware

Redux-thunk helps you unify the way asynchronous and synchronous actions are called, putting asynchronous processes at the action level

function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument);  } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware; export default thunk;Copy the code

The action itself is an object with Type and arguments. Passing Dispatch and getState to the action above, next() and Action () are the methods redux provides. Next, if action is a function, return action(dispatch, getState,extraArgument), otherwise return next(action).

Then reference them to the Redux Store

import { createStore, combineReducers, applyMiddleware } from 'redux' let todoApp = combineReducers(reducers) let store = createStore( todoApp, // applyMiddleware() tells createStore() how to handle middleware applyMiddleware(thunk))Copy the code

Let’s start with the source code

import compose from './compose' export default function applyMiddleware(... middleware){ return (next) => (reducer,initialState) => { let store = next(reducer, initialState) let disptach = store.dispatch let chain = [] var middlewareAPI = { getState: store.getState, dispatch: (action) => dispatch(action) } chain = middlewares.map(middlre => middleware(middlewareAPI)) dispatch = compose(... chain)(store.dispatch) return { ... store, dispatch } } }Copy the code

Let’s take a look at redux’s Middleware mechanism from the following points.

1. The idea of Functional programming redux Middlreware is a method of implementing multi-parameter functions using a hidden list of parameter functions.

ES6 implements a curring function

> function curring(fn){ > return function curried(... args){ > return args.length >= fn.length ? fn.call(this,... args):(... rest)=>{ > return curried.call(this,... args,... rest) > } > } > } >Copy the code

Benefits:

• Easy in-line
• Shared store

1. Distribution of the store

Create a normal store

let newStore = applyMiddleware(mid1,mid2,...) (createStore)(reducer,null)Copy the code

Due to the

var middlewareAPI = {
            getState: store.getState,
            dispatch: (action) => dispatch(action)
        } 
chain = middlewares.map(middlre => middleware(middlewareAPI))Copy the code

Because of closures, each anonymous function can access the same store, the middlewareAPI.

1. compose
   
   The source for compose is a function called compose:

   export default function compose(... Funcs) {if (funcs.length === 0) {return arg => arg} if (funcs.length === 1) {return funcs[0]} // Get the last function const last = funcs[funcs.length - 1]; // Get function [0,length-1) const rest = funcs.slice(0, Curried return (...args) => rest.reduceright ((composed, f) => f(composed), last(...args))}Copy the code

Compose here is somewhat similar to koa-compose in the article. Is a combination in functional programming that combines all the anonymous functions in the chain [F1, F2, F3… fn] into a new function, the new Dispatch, assuming n = 3: Dispatch = F1 (f2(F3 (store.dispatch))) a new dispatch is called and each middleware is executed in turn.

1. Call Dispatch in middleware

From the diagram above, Middleware layers and passes actions through next(Action) up to Redux’s native Dispatch. If one middleware uses Store.dispatch (Action) to distribute actions, it’s like starting all over again.

A typical scenario for using dispatch in Middleware is to accept a directed action that doesn’t want to reach the native distribution action. This is often used in one-step requests, such as redux-Thunk, which accepts dispatch directly.

Let’s summarize the differences

express

1. Middleware is a method that takes req, RES, and next.
2. Any method can be executed in between, including asynchronous methods.
3. Be sure to end the middleware method by notifying res.end or next.
4. If res.end or next is not executed, access will remain stuck until time out.
5. And after that the middleware will not be able to execute.

koa

1. The middleware accepts CTX and next as parameters for a method or another.
2. Any synchronized method can be executed in the. You can do asynchrony by returning a Promise.
3. The middleware determines whether to proceed to the next middleware by returning at the end of the method.
4. Return a Promise object and KOA waits for the asynchronous notification to complete. Then returns next() to jump to the next middleware.
5. Promises can also get stuck if they don’t have asynchronous notifications.

Redux

1. Middleware is a method that takes the store argument.
2. Any method can be executed in between, including asynchronous methods.
3. Middleware is connected by a combination of middlware.
4. Next (Action) processes and delivers the action up to Redux’s native Dispatch, or uses Store.dispatch (Actio) to distribute the action.
5. If a simple call to store.dispatch(action) is made, an infinite loop is created.