React@16.x(60)Redux@4.x(9)- 实现 applyMiddleware
创始人
2025-01-09 12:33:59
0

目录

  • 1,applyMiddleware 原理
  • 2,实现
    • 2.1,applyMiddleware
      • 2.1.1,compose 方法
      • 2.1.2,applyMiddleware
    • 2.2,修改 createStore

接上篇文章:Redux中间件介绍。

1,applyMiddleware 原理

Redux 应用中间件方式:

const store = createStore(reducer, applyMiddleware(logger1, logger2)); 

实际会转为下面的方式执行:

const store = applyMiddleware(logger1, logger2)(createStore)(reducer) 
  • applyMiddleware 会确定用到的中间件;它会返回一个用来创建仓库的函数A,参数createStore
  • 函数 A,会返回创建仓库的函数B,和 createStore 函数差不多。
  • 函数B,会对中间件函数做处理,并修改原始 dispatch

大致相当于:

export const applyMiddleware = (...middlewares) => { 	// 用来创建的仓库的函数     return (createStore) => {     	// 创建仓库的函数         return (reducer, defaultState) => {             const store = createStore(reducer, defaultState)             const dispatch = '经过 middlewares 处理的 store.dispatch'             return {                 ...store,                 dispatch             }         }     } } 

2,实现

2.1,applyMiddleware

上篇文章介绍了 中间件函数 的写法和多个中间件函数的执行顺序。

基于此,实现这个 dispatch 流转的逻辑,并得到最终的 dispatch 即可完成 applyMiddleware

2.1.1,compose 方法

关键要实现

const resultDispatch = logger1(logger2(logger3(store.dispatch))) 

实现:

/**  * @param  {...any} funcs  * @returns {function}  */ export const compose = (...funcs) => {     if (funcs.length === 0) {         return (args) => args;     } else if (funcs.length === 1) {         return funcs[0];     }     return (...args) => {         let lastReturn = null;         for (let i = funcs.length - 1; i >= 0; i--) {             const func = funcs[i];             if (i === funcs.length - 1) {                 lastReturn = func(...args);             } else {                 lastReturn = func(lastReturn);             }         }         return lastReturn;     }; }; 
// 测试代码 const add = (n) => {     return n + n; };  const mult = (n) => {     return n * n; };  const b = compose(add, mult); console.log(b(3)); // 先乘后加,18 

可使用 Array.reduce 简化:

export const compose = (...funcs) =>     funcs.reduce(         (prev, next) =>             (...args) =>                 prev(next(...args))     ); 

2.1.2,applyMiddleware

import { compose } from "./compose"; export const applyMiddleware = (...middlewares) => {     return (createStore) => {         return (reducer, defaultState) => {             const store = createStore(reducer, defaultState);             let dispatch = () => {                 throw new Error("目前还不能使用 dispatch");             };              // 传递给中间件函数的 store 只有这2个属性。             const simpleStore = {                 getState: store.getState,                 dispatch: (...args) => dispatch(...args), // 每个中间件函数的 dispatch 都是上一个中间件组装后的             };             // 获取用于创建 dispatch 的函数             const dispatchProducts = middlewares.map((m) => m(simpleStore));             // 重新组装后的 dispatch             dispatch = compose(...dispatchProducts)(store.dispatch);             return {                 ...store,                 dispatch,             };         };     }; }; 

2.2,修改 createStore

之前实现的 createStore,没有对可能的第3个函数做处理。这里补充下:

  • 如果第2个参数是 applyMiddleware,那说明没有 defaultState

这里就简单判断写第2个参数是不是函数,实际源码中 defaultState 也可以通过一个函数创建。

export const createStore = (reducer, defaultState, enhancer) => {     // enhancer 表示 applymiddleware 返回的函数。     if (typeof defaultState === 'function') {         enhancer = defaultState         defaultState = undefined     }     if (typeof enhancer === 'function') {         enhancer(createStore)(reducer, defaultState)     }     // 其他剩余代码没有做变动。     // ... } 

完整代码

export const createStore = (reducer, defaultState, enhancer) => {     // enhancer 表示 applymiddleware 返回的函数。     if (typeof defaultState === "function") {         enhancer = defaultState;         defaultState = undefined;     }     if (typeof enhancer === "function") {         enhancer(createStore)(reducer, defaultState);     }          let currentReducer = reducer;     let currentState = defaultState;     let listeners = [];      const dispatch = (action) => {         if (typeof action !== "object" || Object.getPrototypeOf(action) !== Object.prototype) {             throw new Error("action 必须是一个 plain Object");         }         if (action.type === undefined) {             throw new Error("action 必须有 type 属性");         }         currentState = currentReducer(currentState, action);         // 每次更新时,遍历监听器。         for (const listener of listeners) {             listener();         }     };      const getState = () => {         return currentState;     };      const subscribe = (listener) => {         listeners.push(listener);         let isRemove = false;         // 取消监听         return () => {             if (isRemove) {                 return;             } else {                 isRemove = true;                 listeners = listeners.filter((f) => f !== listener);             }         };     };      // createStore 创建时会调用一次。     dispatch({         type: `@@redux/INIT${getRandomString}`,     });      return {         dispatch,         getState,         subscribe,     }; };  function getRandomString() {     return Math.random().toString(36).substring(2, 8).split("").join("."); } 

以上。

相关内容

热门资讯

透视了解!wepoker私人局... 透视了解!wepoker私人局透视(透视)作弊视频(好像存在有挂)1)wepoker私人局透视辅助挂...
透视系统!wpk是真的还是假的... 透视系统!wpk是真的还是假的(透视)免费辅助(原来真的有挂)1、很好的工具软件,可以解锁游戏的wp...
透视辅助!wepoker怎么下... 透视辅助!wepoker怎么下载游戏(透视)wepoker有什么规律(好像有挂);1、起透看视 we...
透视ai!德普之星辅助软件(透... 透视ai!德普之星辅助软件(透视)辅助软件(一贯存在有挂)在进入德普之星辅助软件辅助挂后,参与本局比...
透视挂!wepoker私人局外... 透视挂!wepoker私人局外卦(透视)辅助脚本(一贯是有挂);1、金币登录送、破产送、升级送、活动...
透视好友房!wpk私人辅助(透... 透视好友房!wpk私人辅助(透视)透视插件(总是真的有挂);1)wpk私人辅助辅助挂:进一步探索wp...
透视最新!wepoker游戏的... 透视最新!wepoker游戏的安装教程(透视)wepoker插件功能辅助器(一直是真的有挂)wepo...
透视美元局!德普之星透视辅助软... 透视美元局!德普之星透视辅助软件(透视)免费透视(其实真的是有挂)1、许多玩家不知道德普之星透视辅助...
透视插件!wepoker手机版... 透视插件!wepoker手机版透视脚本(透视)私人局辅助挂(一直存在有挂)1、让任何用户在无需wep...
透视规律!wpk辅助软件(透视... 透视规律!wpk辅助软件(透视)刷入池率脚本(真是有挂)1、打开软件启动之后找到中间准星的标志长按。...