浅析react中间件机制

看过react的人都知道, react是一个view层的展现库,要想实现对页面数据和路由的管理还需要配合其它的库。这其中最常用的就是redux和react-router库。

通过redux库能够统一管理页面数据,保证数据的单向流动,其大概流程是 用户触发页面交互,页面根据用户交互产生一个action并将这个action通过store的dispatch方法传给

sotre,store根据一定关系找到reducer,reducer根据action的type类型产生新的state值并将新产生的state值回传给store,store根据最新的state通知view重新渲染页面(通过调用render函数)。而react-rouer则用来控制react中路由跳转。这样通过react redux react-router相互配合形成类似于mvc的前端页面结构。

在上面的流程中store是数据管理的源头,但是store的数据又来自哪里呢?可以说绝大多数数据来自服务端,这里又可以分为两类数据,一类是在页面初始化的时候由服务端直接提供的数据,另一类是通过用户交互从服务端获取的数据。对于第二类数据主要是通过异步方式(ajax或者promise或者生成器或者await/async)获取的数据。今天主要记录一下自己对react和redux配合使用时如何将异步获取数据流程融合进去的理解。

在用户操作页面得到结果的过程中主要经历了以下几个主要过程 1.用户交互产生action 2.dispatch分发action 3.reducer产生新的state值 4.storoe通知view重新渲染页面。如果要把异步获取数据的操作融合进去只有1 2两个阶段,而这两个阶段中只有在产生action之后 分发action之前是最合适的时机。要想了解这其中的运行机制,就必须了解react中间件的原理。中间件很好理解,就是一个处理过程,有输入有输出,但是中间加入了一些其它操作,类似于设计模式中的装饰模式。经过中间件的处理后,能够增加一些其它功能,比如日志记录功能,数据上报功能等等。

我们在学习react的时候会看到很多关于如何 使用react和redux的示例代码,在创建store的时候有些是这样的:

 const store=createStore1(rootReducer,initialState);

也有些是这样:

createStore1 = applyMiddleware(thunk)(createStore)(rootReducer,initialState);
时间: 2024-10-29 19:12:16

浅析react中间件机制的相关文章

DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能

DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能 一.引言 在当前的电子商务平台中,用户下完订单之后,然后店家会在后台看到客户下的订单,然后店家可以对客户的订单进行发货操作.此时客户会在自己的订单状态看到店家已经发货.从上面的业务逻辑可以看出,当用户下完订单之后,店家或管理员可以对客户订单进行跟踪和操作.上一专题我们已经实现创建订单的功能,则接下来自然就是后台管理功能的实现了.所以在这一专题中将详细介绍如何在网上书店案例中实现后台管理功能. 二.后台管理中的权限管理的实现 后台管理中,

浅析Android Handle机制

一.Handle的用例: 1.创建handle实例 new handle(); 2.发送信息载体(Message) sendMessage(msg); 3.处理消息 handleMessage(Message msg){}; 二.原理浅析 结合以上的handle调用三部曲,我们将顺藤摸瓜理清Handle.Looper.Message.MessageQueue的逻辑与关系. 1.new Handle():这个操作将生成一个Handle实例,handle实例有三个属性mLooper.mQueue.m

全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下

KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async函数,Koa帮你丢弃回调函数,并有力地增强错误处理. Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序. 为什么产生? 笔者对这几个框架都不熟,这里就不误人子弟了.可以看看下面一些大佬的介绍. Koa是由Express的原班人马打造,那么他们为什么不将

源码看React 事件机制

对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 <button onClick={this.autoFocus}>点击聚焦</button> 这是我们在React中绑定事件的常规写法.经由JSX解析,button会被当做组件挂载.而onClick这时候也只是一个普通的props.ReactDOMComponent在进行组件加载(moun

react 中间件相关的一些源码解析

零.随便说说中间件 在react的使用中,我们可以将数据放到redux,甚至将一些数据相关的业务逻辑放到redux,这样可以简化我们组件,也更方便组件抽离.封装.复用,只是redux不能很好的处理异步,当我们获取接口数据的时候,redux就满足不了我们的需要.然后,中间件就出来了,使用中间件可以满足我们异步获取数据,当然也可以干其他的事: 我们都知道一个数据更新,经过component >> action  >> dispatch >> reducers >>

[React]Context机制

在React中,Context机制是为了方便在组件树间传递数据. 例子 import React from 'react' const themes={ light:"亮色主题", dark:"暗色主题" } const sexs={ man:"男性", wem:"女性", } const SexContext=React.createContext(sexs.man); const ThemeContext=React.cr

(转)浅析JS运行机制

原文 从一个简单的问题谈起: 1 <script type="text/javascript"> 2 alert(i); // ? 3 var i = 1; 4 </script> 输出结果是undefined, 这种现象被称成“预解析”:JavaScript引擎会优先解析var变量和function定义.在预解析完成后,才会执行代码.如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件),运行顺序是: 1 step1.

浅析Java反射机制

一.反射的理解 反射类似于我们平时见到的平面镜的反射:被反射的目标(任意一个已知名称的类),反射出来的"镜像"(我们的类对象<Java中任意一个类都对应有一个类对象>),通过这个"镜像",类对象,我们就可以在运行时获取任意一个已知名称的类对应的信息. 二.Java反射机制提供的功能 Java反射机制主要提供了以下功能:在运行时判断任意一个独享所属的类:在运行时构造任意一个类的对象:在运行时判断任意一个类所具有的成员变量和方法:在运行时调用任意一个对象的方

Android图解浅析事件拦截机制

当Android系统捕获到用户的各种输入事件后,如何准确的传递给真正的需要这个事件的控件?Android提供了一整套完善的事件传递.处理机制,来帮助开发者完成准确的事件分配与处理,这里我就不分析源码了,简单点,图形化分发过程,便于理解. 当我们点击一个按钮时,通常会产生两个或者三个事件---按下.滑动(可能无).抬起.Android为触摸事件封装了一个类----MotionEvent,其中假如我们重写一个view的onTouchEvent事件中的参数就是一个MotionEvent.由于Andro