【前端知识】React 基础巩固(三十八)——log、thunk、applyMiddleware中间件的核心代码

React 基础巩固(三十八)------log、thunk、applyMiddleware中间件的核心代码

一、打印日志-中间件核心代码

利用Monkey Patching,修改原有的程序逻辑,在调用dispatch的过程中,通过dispatchAndLog实现日志打印功能

javascript 复制代码
// 打印日志-中间件核心代码
function log(store) {
  const next = store.dispatch;

  function logAndDispatch(action) {
    console.log("当前派发的action:", action);
    // 真正派发的代码:使用之前的dispatch进行派发
    next(action);
    console.log("派发之后的结果:", store.getState());
  }

  // monkey patch: 猴补丁 => 篡改现有的代码,对整体的执行逻辑进行修改
  store.dispatch = logAndDispatch;
}

export default log;

二、thunk-中间件核心代码

redux中利用中间件redux-thunk 可以让dispatch不不仅能处理对象,还能处理函数

javascript 复制代码
// react-thunk-中间件核心代码
function thunk(store) {
  const next = store.dispatch;
  function dispatchThunk(action) {
    if (typeof action === "function") {
      action(store.dispatch.store.getState);
    } else {
      next(action);
    }
  }
  store.dispatch = dispatchThunk;
}

export default thunk;

三、applyMiddleware-中间件核心代码

单个调用函数来应用中间件,非常不方便,封装一个函数来合并中间件

javascript 复制代码
function applyMiddleware(store, ...fns) {
  fns.forEach(fn => {
    fn(store)
  })
}

export default applyMiddleware

四、应用中间件

在store/index.js中应用上面三个手动封装的中间件:

javascript 复制代码
import { configureStore } from "@reduxjs/toolkit";

import counterReducer from "./features/counter";
import homeReducer from "./features/home";
// 引入中间件
import { log, thunk, applyMiddleware } from "./middleware";

const store = configureStore({
  reducer: {
    counter: counterReducer,
    home: homeReducer,
  },
});

// 应用中间件
applyMiddleware(store, log, thunk);

export default store;
相关推荐
LuckySusu3 分钟前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu3 分钟前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
洋不写bug15 分钟前
前端环境搭建,保姆式教学
前端
需要兼职养活自己27 分钟前
react高阶组件
前端·react.js
TechFrank34 分钟前
Shadcn/ui 重磅更新:7 个实用新组件深度解析与实战指南
前端
快乐是一切42 分钟前
PDF中的图像与外部对象
前端
前端开发呀1 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
今天周二1 小时前
vite 将react老项目中的没有兼容处理的写法转成兼容性写法
react.js
云枫晖1 小时前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate1 小时前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员