React应用框架Dva数据流向原理总结分析
作者:超级白的小白
Dva是什么?
在刚刚接触Dva时,我最想知道的第一个问题就是:
Dva官网文档的介绍是:
dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。
dva = React-Router + Redux + Redux-saga
说实话这些名词让我只能一个一个的百度,虽然不能说毫无收获,但是依然难以理解。 现在我的理解Dva是一个轻量化的数据流向方案。 既然说是数据流向方案,那就应该先看数据流向的流程图嘛,但是在我看到官网的流程图后,发现对于第一次接触Dva的我来说,确实无异于“天书”。
流程图怎么看?
其中的单词代表的又是什么意思呢?
参考最近接触到的项目中使用的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页面时:
Model对象属性
在接触Dva这几天,使用到了Model对象所具有以下几种属性:
(1)namespace:前面提到过相当于全局State中的key。 namespace: 'historyScoreServiceModel'
(2)state:表示 Model 当前的状态数据。
state: { reportData: [], workData: [], report: '', reportUrl:'' },
State State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);
操作的时候每次都要当作不可变数据来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。
(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/
以上就是React应用框架Dva数据流向原理总结分析的详细内容,更多关于React框架Dva数据流向的资料请关注脚本之家其它相关文章!