dva开源项目_dva 框架介绍
dva 是基于 redux 最佳实践 实现的 framework,简化使用 redux 和 redux-saga 时很多繁杂的操作
数据流向
数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致
image.png
Modul
Subscription
Subscriptions 是一种从 源 获取数据的方法,它来自于 elm。
Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
subscriptions: {
setup({ dispatch, history }) {
history.listen(async ({ pathname }, action) => {
const re =
pathToRegexp('/group-member/list/:groupId').exec(pathname)
||
pathToRegexp('/group-member/del/:groupId').exec(pathname)
if (action !== 'POP' && re && re[1]) {
const groupId = +re[1]
dispatch({ type: 'initList' })
dispatch({ type: 'fetchGroupMemberList', groupId })
}
})
},
},
Effect
Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。
dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。
effects: {
* fetchGroupMemberList({ groupId }, { call, put }) {
try {
const { succeed, data: { role, member: { list: briefs } } } =
yield call(fetch.get, `${GROUP_MEMBER_URL}/${groupId}/1/${GROUP_MEMBER_PAGE_SIZE}`)
if (succeed) {
yield put({ type: 'nextList', briefs, page: 1 })
yield put({ type: 'setIdAndRole', role })
}
} catch (err) {
console.log('Error when fetch group member list', err.stack)
yield put({ type: 'app/showToast', title: '获取群组成员列表错误' })
}
},
...
},
Reducer
在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用immutable data,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。
reducers: {
initList(state) {
console.log('initLists')
return {
...state,
list: [],
}
},
...
},
State
State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化
state: {
id: 0,
title: '全部成员',
list: [],
briefs: {},
itemCount: 1,
isManager: false,
},
Action
Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的
dispatch({ type: 'initList' })
dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者 Effects
Route Components
在 dva 中我们通常将其约束为 Route Components,因为在 dva 中我们通常以页面维度来设计 Container Components。
所以在 dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)
class GroupMember extends PureComponent {
static propTypes = {
groupId: PropTypes.number.isRequired,
title: PropTypes.string,
list: PropTypes.arrayOf(PropTypes.number),
fetchNext: PropTypes.func,
briefs: PropTypes.instanceOf(Object),
removeMember: PropTypes.func,
showConfirm: PropTypes.func,
url: PropTypes.string.isRequired,
}
static defaultProps = {
title: '',
list: [],
fetchNext: () => {},
briefs: {},
isManager: false,
removeMember: () => {},
showConfirm: () => {},
}
submitRemoveMember = id => () => {
const { removeMember, groupId } = this.props
removeMember(groupId, id)
}
...
render() {
const { title, list, fetchNext, groupId } = this.props
return (
title={title}
/>
ref={(listView) => { this.listView = listView }}
dataSource={ds.cloneWithRows(list)}
renderRow={this.renderMember}
enableEmptySections
onEndReached={() => fetchNext(groupId)}
onEndReachedThreshold={100}
/>
)
}
}
connect
通过connect将modul中的元素作为props的方式传递给component
export default connect(({ groupMember, app }, { location }) => {
const url = location.pathname
const groupId = +location.params.groupId
const userId = app.userInfo.userId
let list = [...groupMember.list]
let briefs = { ...groupMember.briefs }
if (url.indexOf('del') !== -1) {
list = list.filter(each => (each !== userId))
briefs = R.dissoc(userId, briefs)
}
return { ...groupMember, groupId, url, list, briefs }
}, { ...actions, ...appActions })(GroupMember)
参考文档:
dva开源项目_dva 框架介绍相关推荐
- 【收藏】Android开源项目和 框架
Android四款系统架构工具 http://dev.yesky.com/281/35399281.shtml AOSP http://source.android.com/index. ...
- 600多个iOS开源项目分类及介绍
600多个iOS开源项目分类及介绍 详情见:http://github.ibireme.com/github/list/ios/
- 开源项目cardslib简单介绍和导入eclipse并运行的方法
本文转自http://blog.csdn.net/a396901990/article/details/25158223,仅供学习使用,所有权力归原作者所有. 开源项目里有两个关于Crad类型的自定义 ...
- Qt开发的开源项目DBA技术介绍
DBA项目采用的技术介绍 DBA项目是采用Qt+VS2015开发的开源项目.过程中也参考了他人的文章,源代码中已尽量标注出来.也希望这个项目对初学者有所帮助. Qt与VS2015混合编程 ? 建立Qt ...
- github开源企业级应用框架介绍CIIP
简介 CIIP是基于XAF开发的开源信息系统框架,经历了4个月的开发终于可以拉出来见人了.CIIP最常见的应用场景是基于数据库的企业级应用程序,例如供应链系统,ERP系统,MRP系统,CRM系统等. ...
- 【Django】创建项目及框架介绍,学习笔记(一)
[学习教程] 1.Django基础教程:https://code.ziqiangxuetang.com/django/django-tutorial.html 2.Django博客:http://ww ...
- 年度大盘点:机器学习开源项目及框架
我们先来看看Mybridge AI 中排名靠前的顶级开源项目,再聊聊机器学习今年都有哪些发展,最后探寻下新的一年中会有哪些有值得我们期待的事情. 顶级的开源项目 BERT BERT,全称为Bidire ...
- 龙芯2K1000实战开发-项目整体框架介绍
目录 概要 整体架构 技术名词解释 1.DDR3: 2.NAND_FLASH: 3.FPGA: 4.MSATA: 5.VPX: 6.PCie: 7.ETH: 技术细节 小结 概要 本项目主要以龙芯2k ...
- 京东区块链开源项目——JD Chain介绍及区块链白皮书发布
导言 近日,京东区块链底层引擎JD Chain正式对外开源并同步上线开源社区,旨在为企业级用户和开发者提供开源服务,帮助他们提高研发效率,加速技术创新.3月30日,国家互联网信息办公室公布了第一批区块 ...
最新文章
- C++ 析构函数设为虚函数的好处
- site_url()和base_url()
- linux内核那些事之early boot memory-memblock
- 数据结构中三表合一的实现
- SQL中的模糊范围查询特殊符号应用
- mysql通信协议的半双工机制理解
- C++ std::vector 自定义排序
- 自媒体文章标题的大坑,难怪你写的文章没有推荐
- 在哈尔滨的寒风中EOJ 3461【组合数学】
- java word 水印_java操作word水印
- Rails 中的Concerns 目录
- java安卓模拟器和电脑通信_android模拟器与PC的端口映射
- kmeans python interation flag_Bisecting k-means聚类算法实现
- 红米手机4A怎么样刷入开发版获得ROOT权限
- CodeWarrior相关概述
- 003_wz_wed_DL_课程一第二周编程题(Logistic回归;神经网络思维;)
- Excel中查找比对VLOOKUP()函数的使用方法一
- 计算机设置鼠标关灯,鼠标灯怎么关?通过BIOS设置即可解决!
- 禁止滚动条滚动和移除禁止
- 利用手机摄像头采集图片运行ORB-SLAM2