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

这篇具有很好参考价值的文章主要介绍了【前端知识】React 基础巩固(三十八)——log、thunk、applyMiddleware中间件的核心代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

// 打印日志-中间件核心代码
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不不仅能处理对象,还能处理函数

// 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-中间件核心代码

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

function applyMiddleware(store, ...fns) {
  fns.forEach(fn => {
    fn(store)
  })
}

export default applyMiddleware

四、应用中间件

在store/index.js中应用上面三个手动封装的中间件:文章来源地址https://www.toymoban.com/news/detail-621310.html

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;

到了这里,关于【前端知识】React 基础巩固(三十八)——log、thunk、applyMiddleware中间件的核心代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

    从这行代码可以看到,目前的connect直接引用了上级目录的store,过于依赖目前既定的store,这样不利于复用。假设另一个项目的store所在位置不在上级目录中,则会出现问题。 为了让所有人都能使用,我们应该把这种“写死”的做法换成让开发者自己传入一个store: 构建一个

    2024年02月15日
    浏览(48)
  • 【前端知识】React 基础巩固(三十六)——RTK中的异步操作

    引入RTK中的createAsyncThunk,在extraReducers中监听执行状态 在界面中引入所需的异步操作Action 查看运行结果 extraReducer还可以传入一个函数,函数接受一个builder参数: 查看运行结果,与之前的写法结果一致

    2024年02月15日
    浏览(48)
  • 【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件。 Router包括两个API: BrowserRouter使用history模式 HashRouter使用hash模式(路径后面带有#号) 尝试在项目中使用HashRouter: 安装Router 在 index.js 中引入并使用HashRouter Routes:包裹所有的Route,在其中匹配一个路由(

    2024年02月14日
    浏览(62)
  • 【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化

    通过组件的生命周期来完成网络请求,网络请求的异步代码直接放在组件中 通过redux来管理异步网络请求 在store中引入中间件 redux-thunk 构建 fetchHomeMultidataAction ,将原本在组件中的异步请求代码放入到actionCreators.js中 改写原来的category.jsx,派发异步请求的dispatch 查看运行结果

    2024年02月15日
    浏览(65)
  • 【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践

    单一数据源 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中; Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护; 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改; State是只读的 唯一修改State的方法

    2024年02月15日
    浏览(60)
  • 【前端知识】React 基础巩固(三十一)——store数据的订阅和Redux的优化

    store/index.js test.js redux代码优化: 将派发的action生成过程放到一个actionCreators函数中 将定义的所有actionCreators的函数,放到一个独立的文件中:actionCreators.js actionCreators 和 reducer 函数中使用字符串常量是一致的,所以将常量抽取到一个独立的constants.js文件中 将reducer和默认值(

    2024年02月15日
    浏览(47)
  • 【前端知识】React 基础巩固(十三)——列表渲染

    在 React 中没有像 Vue 模块语法中的 v-for 指令,而是需要我们通过 JS 代码的方式组织数据,转成 JSX 在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数 在展示数组前,有时会进行一些处理 过滤一些内容(filter 函数) 截取数组中的一部分内容(slice 函数) 列表中的

    2024年02月10日
    浏览(51)
  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(58)
  • 【前端知识】React 基础巩固(四十)——Navigate导航

    新建Login页面,在Login中引入Navigate,实现点击登陆按钮跳转至 /home 路径下: 当路由均无匹配时,通过Navigate跳转至NotFound界面,其中 * 为通配符: 构建NotFound.jsx 在App.jsx中配置NotFound: 构建Home的子路由页面: HomeRecommend.jsx HomeRanking.jsx 利用 Route 嵌套子路由,实现Home页面下的

    2024年02月14日
    浏览(61)
  • 【前端知识】React基础巩固(二)——JSX注意点

    createElement存在的问题: 繁琐不简洁 不直观,无法一眼看出所描述的结构 不优雅,开发体验不好 JSX 简介:JSX 是 JavaScript XML 的简写,表示了在JS代码中写XML(HTML)格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率 JSX 是 react 的核心内容‘

    2024年02月09日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包