Redux高级篇

前言

在前面的基础篇，咱们学习了一些redux的基础使用和基本方法的实现，可是这些基础的使用并不能知足咱们的平常开发的须要，本文将给你们带来一些更高级的用法与实现。

高级使用

applyMiddleware

在开发的过程当中每每咱们须要在dispatch以前增长一些本身的代码逻辑，也就是须要咱们使用中间件，在redux的设计中就考虑到了这个事情，因此为咱们提供了applyMiddleware这个方法。

中间件思想模拟（aop切片思想）

• 【1】保存原有的dispatch方法
• 【2】重写store中的dispatch方法
• 【3】在重写的dispatch方法中插入本身的逻辑
• 【4】在重写的dispatch方法中执行保存的原有dispath方法

注：本文依然使用基础篇中的React实现源码继续讲解

/** * store/index.js */
import { createStore } from 'redux';
import reducers from './reducers';
const store = createStore(reducers);
/*【1】保存原有的dispatch方法*/
const middleWare = store.dispatch;
/*【2】重写store中的dispatch方法*/
store.dispatch = function(action){
/*【3】在重写的`dispatch`方法中插入本身的逻辑*/
    console.log('老状态',store.getState());
/*【4】在重写的`dispatch`方法中执行保存的原有`dispath`方法*/
    middleWare(action);
/*【3】在重写的`dispatch`方法中插入本身的逻辑*/
    console.log('新状态',store.getState());
}
export default store;
复制代码

实战中间件

经过上一小节的讲解我以为你们应该都明白中间件的做用和基本的思想了，固然在咱们的真正开发中咱们的中间件确定不会像如今这样写的豪无逼格，下面我以实例为你们讲解

/** * store/logger.js */
const logger = ({getState,dispatch})=>next=>action=>{
    console.log('老状态(applyMiddleware)',getState());
    next(action);
    console.log('新状态(applyMiddleware)',getState());
}
export default logger;
/** * store/index.js */
import { createStore,applyMiddleware } from 'redux';
import reducers from './reducers';
import logger from './logger';
const store = applyMiddleware(logger)(createStore)(reducers);
export default store;
复制代码

• 看到这里我相信你们必定是很迷惑，为何就这样执行了呢？那么咱们就一块儿来分析一下这个applyMiddleware的执行过程，并实现一下
  • 【1】applyMiddleware传入一个中间件执行返回一个函数(fn1)
  • 【2】返回的函数(fn1)传入createStore执行又返回函数(fn2)
  • 【3】返回的函数(fn2)传入reducers执行返回store

function applyMiddleware(middleware) {
  /*【1】applyMiddleware传入一个中间件执行返回一个函数(`fn1`)*/
  return function fn1(createStore) {
   /*【2】返回的函数(`fn1`)传入`createStore`执行又返回函数(`fn2`)*/
    return function fn2(reducers) {
    /*【3】返回的函数(`fn2`)传入`reducers`执行返回`store`*/
      const store = createStore(reducers);
      return store;
    }
  }
}
复制代码

上图为应用到目前为止咱们实现的applyMiddleware的截图,能够看到除了咱们的中间件logger没有效果其余逻辑是能够跑通的，所以证实咱们的方向是正确的，因此咱们结合logger继续完善

• 执行分析
  • logger(结合中间件思想模拟)
    • 【1】接收的参数能够解构出getState和dispatch方法，返回fn1
      • 【1-1】回想一下咱们基础篇中哪里有这个方法？没错就是建立的store中
    • 【2】返回的fn1接收参数next
      • 【2-1】经过最后的next(action)，咱们再回想一下基础篇中的哪一个方法执行须要传入action？对的，就是diapatch，这里咱们能够先假象成这个next就是咱们保存的原始dispatch
    • 【3】最后返回action=>{native code}，包装后的diapatch

function applyMiddleware(middleware){
    return function(createStore){
        return function(reducers){
            const store = createStore(reducers);
            let dispatch = ()=>{throw Error('还不能用')};
            const middlewareAPI = {
                getState:store.getState,
                dispatch:(...args)=>dispatch(args)
            }
            middleware = middleware(middlewareAPI);
            dispatch = middleware(store.dispatch);
            return {
                ...store,
                dispatch
            };
        }
    }
}
复制代码

结合咱们的实现，结果以下

实现中间件的级联

上一小节中咱们仅仅是实现了一个中间件的状况，也就是说当咱们有不少事情想在dispatch的时候想搞的时候显然咱们须要多个中间件配合处理，固然你确定想问，为何不能把全部的事情放在一个中间件里面处理呢，这个也不是不能够，可是咱们中间件的使用规则通常都是单一逻辑，也就是说一个中间件只处理一件事情，那么咱们怎么将中间件级联起来呢？

• 使用示范

/*store/index.js*/
import { createStore,applyMiddleware } from 'redux';
import reducers from './reducers';
import logger from './logger';
import logger1 from './logger1';
const store = applyMiddleware(logger,logger1)(createStore)(reducers);
export default store;
/*store/logger.js*/
const logger = ({ getState, dispacth }) => next => action => {
  console.log('老状态', getState());
  next(action);
  console.log('新状态',getState());
}
export default logger;
/*store/logger1.js*/
const logger1 = ({ getState, dispacth }) => next => action => {
  console.log('老状态1', getState());
  next(action);
  console.log('新状态1',getState());
}
export default logger1;
复制代码

function applyMilldeware(...middleware){
    return function(createStore){
        return function(reducers){
            const store = createStore(reducers);
            let dispatch = ()=>{thorw Error('不能用')}
            const middlewareAPI = {
                getState : store.getState;
                dispatch : (..args)=>dispatch(args)
            }
            const chain = middlewares.map(middleware=>middleware(middlewareAPI));
            dispatch = compose(...chain)(store.dispatch)
        }
    }
}
复制代码

compose的讲解