总结对Dva数据流向的简单理解

在刚刚接触Dva时,我最想知道的第一个问题就是:

1. Dva是什么?

Dva官网文档的介绍是:

dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。 dva = React-Router + Redux + Redux-saga

说实话这些名词让我只能一个一个的百度,虽然不能说毫无收获,但是依然难以理解。 现在我的理解Dva是一个轻量化的数据流向方案。 既然说是数据流向方案,那就应该先看数据流向的流程图嘛,但是在我看到官网的流程图后,发现对于第一次接触Dva的我来说,确实无异于“天书”。

2. 流程图怎么看?其中的单词代表的又是什么意思呢?

参考最近接触到的项目中使用的Dva流程和官网文档给出的解释,再次进行梳理。 ①首先,当一个页面发生一个行为,如:用户交互行为或者页面跳转时通常会发生数据的改变,此时dispatch函数会调用一个action,从而使数据发生改变。

** dispatch 函数** dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。 常见的形式如:

dispatch({//dispatch函数具有type,payload两个参数
type: 'user/add', // type是用于找到与渲染层所连接@connet的Model层。
payload: {}, // payload中存放的是访问API所需的参数传递给Model。
}); 

需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。 const { dispatch } = this.props;

②在 Dva 中,可以通过@connect组件来实现View层与Model层的绑定。 dispatch可以调用 Model 中的 Reducer 或者 Effects(对于同步行为则直接调用Reducer来改变State,如果是异步行为则先触发Effects(副作用)然后流向Reducer最终改变State)来改变State。

@connect(({ namespace,loading }) => ({//namespace为Model的一个属性用于识别Model,
其中整个页面的State是由许多Model以namespace为key合成State。namespace,loading
})) 

以上是在页面的js文件中所需做的介绍,当dispatch调用刀Model页面时:

③在接触Dva这几天,使用到了Model对象所具有以下几种属性:

(1)namespace:前面提到过相当于全局State中的key。 namespace: 'historyScoreServiceModel' (2)state:表示 Model 当前的状态数据。

state: {reportData: [],workData: [],report: '',reportUrl:''}, 

State State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

扫描二维码关注公众号,回复: 14629358 查看本文章

(3)effect:在使用过程中其中存放着dispatch所需调用的函数。在使用过程中通过yield call函数调用了server层发送Ajax请求的函数,返回的数据。call的第一个参数是你要调用的函数,第二个参数开始是你要传递的参数。然后对于返回的数据通过yield put的type属性调用调用一个方法并将获取到的State作为参数传入tpye属性所调用的函数中。

 effects: {*getHistoryScore({ payload }, { call, put }) {const response = yield call(调用的server层的函数, 传入的参数);console.log(response)//返回的数据yield put({type: 'save',//调用的save方法payload: {reportUrl: response},});},}, 

(4)reducers:用于数据合并。

在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。

 reducers: {save(state, { payload }) {//save函数传入两个参数一个是原State,一个是新数据,save函数用于将两者扩展合并。return {...state,...payload,};},}, 

④Ajax请求是在effect中通过调用server层的函数,函数体中通过ruquest函数发送Ajax请求,从ApI获取数据。

至此,数据的获取,到拼接到State最终渲染到页面的dva的完整流程就OK了。 现在再来理解一下dva官方文档的数据流程介绍吧。

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致。

  • DvaJS官方文档:https://dvajs.com/guide/ > 理解尚浅,望不吝赐教!

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

猜你喜欢

转载自blog.csdn.net/web22050702/article/details/129307559
今日推荐