ant-design-pro uni.js & dev.js

- 构造model 和 services

新建的文件名字和src/pages相同,umi.js会自动注入同名业务代码

利用dva.ja中的fetch方式访问接口数据,然后在src/utils/request.js编写一层fetch封装方法;

dva.js通过model的概念把一个领域的模型管理起来,包含同步更新state的reduce若是,处理异步逻辑的effects,订阅数据源的subscriptions

  • namespace:表示在全局state上的唯一名称

  • state:表示初始值

  • reducers:用于处理同步操作,唯一可以修改state的地

    是一个函数,接受 state 和 action,返回老的或新的 state 。即:(state, action) => state

  • effects:以key/value格式定义effect。用于处理异步操作和业务逻辑,不直接修改state

put: 用于触发 action 。

yield put({ type: 'todos/add', payload: 'Learn Dva' });

call:用于调用异步逻辑,支持 promise 。

const result = yield call(fetch, '/todos');

select:用于从 state 里获取数据。

const todos = yield select(state => state.todos);
  • subscriptions:用于订阅一个数据源,然后根据需要 dispatch 相应的 action

- dvaJs 的 effects-generators

dav的effects是通过generator阻止的,generator返回的是迭代器,通过yield实现暂停功能。

- dvaJS的Model以及数据流向图解

  • namespace 表示在全局 state 上的 key

  • state 是初始值,在这里是空数组

  • reducers 等同于 redux 里的 reducer,接收 action,同步更新 state

@connect

const Products = ({ dispatch, products }) => {
 function handleDelete(id) {
 dispatch({
 type: 'products/delete',
 payload: id,
 });
 }
 return (
 <div>
 <h2>List of Products</h2>
 <ProductList onDelete={handleDelete} products={products} />
 </div>
 );
};
​
// export default Products;
export default connect(({ products }) => ({
 products,
}))(Products);
image
  • state:表示Model的状态数据,为一个js对象或任何值,操作时要当做不可变数据来对待,保证每次都是新对象,来保证state的独立性,便于测试和追踪变化;

  • action:改变state的唯一途径;action必须带有type属性指明具体的行为,其他字段可以自定义,如果要发起一个action需要使用dispatch函数,dispatch在组件connect Models以后,通过props传入。

  • dispatch:dispatch是一个用于触发action的函数,action是改变state的唯一途径,但是只描述了一个行为,而dispatch可以看做是触发这个行为的方式,reducer则是描述如何改变数据的。【组件通过props可以访问到dispatch,可以调用model中的reducer或者effects】

  • reducer:接受两个参数:之前已经累积运算的结果,和当前要被累积的结果。该函数把一个集合归并成一个单值(state,action),返回一个全新的数据(独立,纯净)

  • effect:异步操作,dav在底层引入了redux-sagas做异步流控制,采用了generator的相关概念,将异步转成同步的写法,从而将effects转为纯函数。

  • subscription:从源获取数据的方法,语义是订阅,用于订阅一个数据源,然后根据条件dispatch需要的action。数据源可以是当前的时间等

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容