Redux:Middleware你咋就这么难

时间  2019-11-06
标签 redux middleware 繁體版
原文   原文链接

　　这段时间都在学习Redux，感受对我来讲初学难度很大，中文官方文档读了好多遍才大概有点入门的感受，小小地总结一下,首先能够看一下Redux的基本流程:
此处输入图片的描述javascript

　　从上面的图能够看出，简单来讲，单一的state是存储在store中，当要对state进行更新的时候，首先要发起一个action(经过dispatch函数),action的做用就是至关于一个消息通知，用来描述发生了什么(好比:增长一个Todo)，而后reducer会根据action来进行对state更新，这样就能够根据新的state去渲染View。
　　
　　固然上面仅仅是发生同步Action的状况下，若是是Action是异步的(例如从服务器获取数据)，那么状况就有所不一样了，必需要借助Redux的中间件Middleware。
　　java

Redux moddleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducergit

　　根据官方的解释，Redux中间件在发起一个action至action到达reducer的之间，提供了一个第三方的扩展。本质上经过插件的形式，将本来的action->redux的流程改变为action->middleware1->middleware2-> ... ->reducer，经过改变数据流，从而实现例如异步Action、日志输入的功能。
　　首先咱们举例不使用中间件Middleware建立store:github

import rootReducer from './reducers'
import {createStore} from 'redux'

let store =  createStore(rootReducer);

　　那么使用中间件的状况下(以redux-logger举例),建立过程以下:面试

import rootReducer from './reducers'
import {createStore,applyMiddleware} from 'redux'
import createLogger from 'redux-logger'

const loggerMiddleware = createLogger();
let store = applyMiddleware(loggerMiddleware)(createStore)(rootReducer);

　　
　　那么咱们不经要问了，为何采用了上面的代码就能够实现打印日志的中间件呢？
　　首先给出applyMiddleware的源码(Redux1.0.1版本):编程

export default function applyMiddleware(...middlewares) {            return (next)  => 
        (reducer, initialState) => {

              var store = next(reducer, initialState);
              var dispatch = store.dispatch;
              var chain = [];

              var middlewareAPI = {
                getState: store.getState,
                dispatch: (action) => dispatch(action)
              };

              chain = middlewares.map(middleware =>
                            middleware(middlewareAPI));
              dispatch = compose(...chain, store.dispatch);
              return {
                ...store,
                dispatch
              };
           };
}

　　上面的代码虽然只有不到20行，但看懂确实是不太容易，实际上包含了函数式编程各类技术，首先最明显的使用到了柯里化(Currying),在我理解中柯里化(Currying)实际就是将多参数函数转化为单参数函数并延迟执行函数，例如:json

function add(x){
    return function(y){
        return x + y;
    }
}
var add5 = add(5);
console.log(add5(10)); // 10

　　关于柯里化(Currying)更详细的介绍能够看我以前的一篇文章从一道面试题谈谈函数柯里化(Currying)。
　　首先咱们看applyMiddleware的整体结构:redux

export default function applyMiddleware(...middlewares) {            return (next)  => 
        (reducer, initialState) => {
        };
}

　　哈哈，典型的柯里化(Currying)，其中(...middlewares)用到了ES6中的新特性，用于将任意个中间件参数转化为中间件数组，所以很容易看出来在该函数的调用方法就是:segmentfault

let store = applyMiddleware(middleware1,middleware2)(createStore)(rootReducer);

　　其中applyMiddleware形参和实参的对应关系是:api

形参 实参
middlewares [middleware1,middleware2]
createStore Redux原生createStore
reducer, preloadedState, enhancer 原生createStore须要填入的参数

　　再看函数体:

var store = next(reducer, initialState);
var dispatch = store.dispatch;
var chain = [];
var middlewareAPI = {
    getState: store.getState,
    dispatch: (action) => dispatch(action)
};

　　上面代码很是简单，首先获得store,并将以前的store.dispatch存储在变量dispatch中，声明chain,以及将middleware须要的参数存储到变量middlewareAPI中。接下来的函数就有点难度了，让咱们一行一行来看。

chain = middlewares.map(middleware => middleware(middlewareAPI))

　 上面实际的含义就是将middleware数组每个middleware执行
middleware(middlewareAPI)的返回值保存的chain数组中。那么咱们不经要问了，中间件函数究竟是怎样的？咱们提供一个精简版的createLogger函数:

export default function createLogger({ getState }) {
      return (next) => 
        (action) => {
              const console = window.console;
              const prevState = getState();
              const returnValue = next(action);
              const nextState = getState();
              const actionType = String(action.type);
              const message = `action ${actionType}`;

              console.log(`%c prev state`, `color: #9E9E9E`, prevState);
              console.log(`%c action`, `color: #03A9F4`, action);
              console.log(`%c next state`, `color: #4CAF50`, nextState);
              return returnValue;
    };
}

　　可见中间件createLogger也是典型的柯里化(Currying)函数。{getState}使用了ES6的解构赋值,createLogger(middlewareAPI))返回的(也就是数组chain存储的是)函数的结构是:

(next) => (action) => {
//包含getState、dispatch函数的闭包
};

　　咱们接着看咱们的applyMiddleware函数

dispatch = compose(...chain,store.dispatch)

　　这句是最精妙也是最有难度的地方,注意一下，这里的...操做符是数组展开，下面咱们先给出Redux中复合函数compose函数的实现(Redux1.0.1版本):

export default function compose(...funcs) {
     return funcs.reduceRight((composed, f) => f(composed));
}

　　首先先明确一下reduceRight(我用过的次数区区可数，因此介绍一下reduce和reduceRight)
　　

Array.prototype.reduce.reduce(callback, [initialValue])

reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操做；第二个参数则是传入的初始值，这个初始值用于单个数组项的操做。须要注意的是，reduce方法返回值并非数组，而是形如初始值的通过叠加处理后的操做。
callback分别有四个参数:

  1. accumulator:上一次callback返回的累积值

  2. currentValue: 当前值

  3. currentIndex: 当前值索引

  4. array: 数组
    例如:

var sum = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
}, 0);
// sum is 6

　　reduce和reduceRight的区别就是从左到右和从右到左的区别。因此若是咱们调用compose([func1,func2],store.dispatch)的话，实际返回的函数是:

//也就是当前dispatch的值
func1(func2(store.dispatch))

　　胜利在望，看最后一句:

return {
    ...store,
    dispatch
};

　　这里实际上是ES7的用法,至关于ES6中的:

return Object.assign({},store,{dispatch:dispatch});

　　或者是Underscore.js中的:

return _.extends({}, store, { dispatch: dispatch });

　　懂了吧，就是新建立的一个对象，将store中的全部可枚举属性复制进去(浅复制),并用当前的dispatch覆盖store中的dispatch属性。因此

let store = applyMiddleware(loggerMiddleware)(createStore)(rootReducer);

中的store中的dispatch属性已经不是以前的Redux原生的dispatch而是相似于func1(func2(store.dispatch))这种形式的函数了，可是咱们不由又要问了，那么中间件Midddleware又是怎么作的呢，咱们看一下以前咱们提供的建议的打印日志的函数:

export default function createLogger({ getState }) {
      return (next) => 
        (action) => {
              const console = window.console;
              const prevState = getState();
              const returnValue = next(action);
              const nextState = getState();
              const actionType = String(action.type);
              const message = `action ${actionType}`;

              console.log(`%c prev state`, `color: #9E9E9E`, prevState);
              console.log(`%c action`, `color: #03A9F4`, action);
              console.log(`%c next state`, `color: #4CAF50`, nextState);
              return returnValue;
    };
}

　　假设一下，咱们如今使用两个中间件,createLogger和createMiddleware,其中createMiddleware的函数为

export default function createMiddleware({ getState }) {
      return (next) => 
        (action) => {
        return next(action)
    };
}

调用形式为:

let store = applyMiddleware(createLogger,createMiddleware)(createStore)(rootReducer);

若是调用了store.dispatch(action),chain中的两个函数分别是
createLogger和createMiddleware中的

(next) => (action) => {}

部分。咱们姑且命名一下chain中关于createLogger的函数叫作
func1,关于createMiddleware的函数叫作func2。那么如今调用
store.dispatch(action),实际就调用了(注意顺序)

//这里的store.dispatch是原始Redux提供的dispatch函数
func1(func2(store.dispatch))(action)

　　上面的函数你们注意以前执行次序，首先func2(store.dispatch再是func1(args)(action)。对于func1得到的next的实参是参数是:

(action)=>{
    //func2中的next是store.dispatch
    next(action);
}

　　那么实际上func1(...)(action)执行的时候，也就是

const console = window.console;
const prevState = getState();
const returnValue = next(action);
const nextState = getState();
const actionType = String(action.type);
const message = `action ${actionType}`;

console.log(`%c prev state`, `color: #9E9E9E`, prevState);
console.log(`%c action`, `color: #03A9F4`, action);
console.log(`%c next state`, `color: #4CAF50`, nextState);
return returnValue;

的时候，getState调用的闭包MiddlewareAPI中的Redux的getState函数，调用next(action)的时候，会回调createMiddleware函数，而后createMiddleware中next函数会回调真正的store.dispatch(action)。所以咱们能够看出来实际的调用顺序是和传入中间件顺序相反的，例如：

let store = applyMiddleware(Middleware1,Middleware2,Middleware3)(createStore)(rootReducer);

实际的执行是次序是store.dispatch->Middleware3->Middleware2->Middleware1。
　　不知道你们有没有注意到一点，

var middlewareAPI = {
    getState: store.getState,
    dispatch: (action) => dispatch(action)
};

并无直接使用dispatch:dispatch，而是使用了dispatch:(action) => dispatch(action)，其目的是若是使用了dispatch:dispatch，那么在全部的Middleware中实际都引用的同一个dispatch(闭包)，若是存在一个中间件修改了dispatch，就会致使后面一下一系列的问题，可是若是使用dispatch:(action) => dispatch(action)就能够避免这个问题。
　　接下来咱们看看异步的action如何实现，咱们先演示一个异步action creater函数:

export const FETCHING_DATA = 'FETCHING_DATA'; // 拉取状态
export const RECEIVE_USER_DATA = 'RECEIVE_USER_DATA'; //接收到拉取的状态
export function fetchingData(flag) {
    return {
        type: FETCHING_DATA,
        isFetchingData: flag
    };
}

export function receiveUserData(json) {
    return {
        type: RECEIVE_USER_DATA,
        profile: json
    }
}
export function fetchUserInfo(username) {
    return function (dispatch) {
        dispatch(fetchingData(true));
        return fetch(`https://api.github.com/users/${username}`)
            .then(response => {
                console.log(response);
                return response.json();
            })
            .then(json => {
                console.log(json);
                return json;
            })
            .then((json) => {
                dispatch(receiveUserData(json))
            })
            .then(() => dispatch(fetchingData(false)));
    };
}

　　上面的代码用来从Github API中拉取名为username的用户信息，可见首先fetchUserInfo函数会dispatch一个表示开始拉取的action，而后使用fetch函数访问Github的API,并返回一个Promise,等到获取到数据的时候，dispatch一个收到数据的action，最后dispatch一个拉取结束的action。由于普通的action都是一个纯JavaScript Object对象，可是异步的Action却返回的是一个function，这是咱们就要使用的一个中间件:redux-thunk。
　　咱们给出一个相似redux-thunk的实现：

export default function thunkMiddleware({ dispatch, getState }) {
      return next => 
             action => 
                   typeof action === ‘function’ ? 
                     action(dispatch, getState) : 
                     next(action);
}

这个和你以前看到的中间件很相似。若是获得的action是个函数，就用dispatch和getState看成参数来调用它，不然就直接分派给store。从而实现异步的Action。
　　Redux入门学习，若是有写的不对的地方，但愿你们指正，欢迎你们围观个人博客:
　　
　　MrErHu
　　SegmentFault

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程