redux深切进阶

2024年3月4日 173次阅读 来源: Jokcy

上一篇文章解说了redux怎样运用，本篇文章将进一步深切，从redux的源码入手，深切进修redux的中心件机制。
在这里我们会以一个redux-thunk中心件为例，逐渐剖析redux的中心机制怎样操纵，怎样实行。

闲话不多说，上代码。

怎样加载中心件

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// create a store that has redux-thunk middleware enabled
const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

这里须要用到redux中供应的一个东西要领，叫做applyMiddleware,向该要领传入你想要运用的中心件，完了以后再传入createStore要领，
终究构成新的建立store的要领。

这显然是一个装潢器形式，经由过程差别的中心件对createStore要领举行润饰，末了构成新的createStore要领，那末建立的store就具有这些中心件的特征，
异常精彩的设想，欣喜不仅在这，看了以后的代码你就更不得不信服作者的代码设想能力。

霎时认为他人都是码神，而我就是码农有木有/(ㄒoㄒ)/~~

中心件加载机制的完成

先来看applyMiddleware要领的完成

import compose from './compose';

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 *
 * See `redux-thunk` package as an example of the Redux middleware.
 *
 * Because middleware is potentially asynchronous, this should be the first
 * store enhancer in the composition chain.
 *
 * Note that each middleware will be given the `dispatch` and `getState` functions
 * as named arguments.
 *
 * @param {...Function} middlewares The middleware chain to be applied.
 * @returns {Function} A store enhancer applying the middleware.
 */
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
    };
  };
}

这就是redux内里这个要领的源码，个中还一半是解释有木有。。。原本认为一定有百来行代码的
固然这里不得不说es6的特征供应了异常多的协助，所认为了省力吧es6玩透照样灰常有必要的（更别说为了装X了(^__^) ）

从这里最先代码就有点绕了，我们逐行剖析

return (next) => (reducer, initialState) => {...}

全部applyMiddleware要领就是返回了一个要领，依据applyMiddleware要领的运用，我们能够晓得next就是createStore要领，
由于终究我们要返回的是一个装潢过的createStore要领，那末吸收的参数一定是不会变，所以终究我们挪用createStoreWithMiddleware要领实在就是挪用

function (reducer, initialState) {
    var store = next(reducer, initialState); // next即为最初的createStore要领
    // ...以下省略
}
var store = next(reducer, initialState);
var dispatch = store.dispatch;
var chain = [];

这里没什么好讲的，起首建立了一个store，这个store就是最原始的经由过程createStore建立的store，后两行只是变量赋值

var middlewareAPI = {
  getState: store.getState,
  dispatch: (action) => dispatch(action)
};
chain = middlewares.map(middleware => middleware(middlewareAPI));
dispatch = compose(...chain)(store.dispatch);

这里是症结，必需细致举行解说。

起首，这边声清楚明了一个middlewareAPI对象，这个对象包括两个要领：

  1. getState：store中的getState要领的援用

  2. dispatch：对自身的dispatch要领举行一次封装

然后

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

我们来细致看看这行代码，起首我们对一切的中心件举行一个map，map效果就是挪用中心件要领，将middlewareAPI作为参数传入,
这里我们拿redux-thunk中心件举例，来看看一个中心件是长什么模样的，传入的参数又是用来干吗的。

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

redux-thunk的功用是让action支撑异步，让我们能够在action中跟服务器举行交互等操纵，而他的完成。。。(⊙﹏⊙)b是的，又是这么几行代码。

我们回忆之前的代码，在map一切中心件的时刻我们挪用了thunkMiddleware要领，传入两个要领dispatch和getState，然后返回了一个要领，
我们大抵笼统一下，应当以下：

function (next) {
  
  return function (action) {
    typeof action === 'function' ?
      action(dispatch, getState) :
      next(action)
  }
  
}

因而我们接下去剖析applyMiddleware内里的代码，

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

如今我们晓得chain是一个数组，每一项是挪用每一个中心件以后的返回函数

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

compose是redux内里的一个协助函数，代码以下：

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

~~(>_<)~~我已不想再吐槽什么了，

我们看到这边先挪用了compose函数，传入了构造后的chain数组，然后compose函数返回的也是一个函数：

function (arg) {
  return funcs.reduceRight((composed, f) => f(composed), arg);
  // funcs就是中心件数组
}

然后我们把store.dispatch函数作为arg传入这个效果，这里reduceRight能够参考这里
。那末这边获得的效果是什么呢？

// 假定中心件数组是[A, B, C]
// 那末效果就是A(B(C(store.dispatch)))

再次连系redux-thunk来看，我们假定只要一个中心件，那末终究的dispatch要领就是

function (action) {
  typeof action === 'function' ?
    action(dispatch, getState) :
    next(action)
}
// 这里的next要领，就是真正的store.dispatch要领
// 这里的dispatch是(action) => store.dispatch(action)

我们再连系redux-thunk的运用要领来剖析一下，

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

这是运用redux-thunk时能够定义的异步action，我们触发action的时刻挪用的是

dispatch(incrementAsync())

incrementAsync返回的是

function (dispatch) {
  setTimeout(() => {
    // Yay! Can invoke sync or async actions with `dispatch`
    dispatch(increment());
  }, 1000);
}

这个时刻我们追念经由中心件加工的dispatch要领：

function (action) {
  typeof action === 'function' ?
    action(dispatch, getState) :
    next(action)
}
// 这里的next要领，就是真正的store.dispatch要领
// 这里的dispatch是(action) => store.dispatch(action)

action是一个函数，所以action === 'function' ?建立，那末就实行action， 并把中心件吸收到的dispatch要领（(action) => store.dispatch(action)）要领作为参数传入，在异步要领实行完以后再次触发真正的action。假如action不是异步的，那末久直接返回一个对象，这个时刻action === 'function' ?不建立，就直接挪用next，也就是原始的store.dispatch要领。

我们再接着想，假如我们有很多个中心件，那末没一个中心件的next就是下一个中心件直到末了一个中心件挪用store.dispatch为止。

以上的代码异常绕，发起去专研一下源码。这么精简的代码包括了异常多的函数式编程的头脑，也用到了装潢器形式的道理，不得不说：

太烧脑啦/(ㄒoㄒ)/~~

    原文作者：Jokcy
    原文地址: https://segmentfault.com/a/1190000004612224
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞