React 应用框架：DvaJS

最近在学习react相关的东西，记录一下react 开发中，组件通信和数据流的应用框架 dva；

一、dva是什么？要解决的问题？

React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。
React 只提供了一种通信手段：传参。

对于复杂应用，组件的通信，异步逻辑的执行，数据和视图之间的绑定等，这种方式就显得很繁琐笨重。

目前流行的数据流方案有：
路由： React-Router
架构： Redux
异步操作： Redux-saga

dva 是一个轻量级的的 React 应用框架，基于 redux 和 redux-saga 的数据流方案，为了简化开发体验，dva 还额外内置了 react-router 和 fetch。
dva = React-Router + Redux + Redux-saga

二、dva核心概念：

State：一个对象，保存整个应用状态

State 是储存数据的地方，收到 Action 以后，会更新数据。

View：React 组件构成的视图层

View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。

Action：一个对象，描述事件

{
  type: 'fetchCount',
  payload: this.form.data
}

connect()：一个函数，绑定 State 到 View

import { connect } from 'dva';

const App = (props) => {
	const {name} = props;
	return <div>{name}</div>
}

//mapStateToProps 函数会返回一个对象;
//用于建立 State 到 Props 的映射关系。
function mapStateToProps(state) {
  //全局state下，命名空间为user的model中的name数据
  return { name: state.user.name};
}
export default connect(mapStateToProps)(App);

还可以这样写：

import { connect } from 'dva';

const App = (props) => {
	const {name} = props;
	return <div>{name}</div>
}
export default connect({user} => ({name:user.name}))(App);

dispatch()：一个函数，发送 Action 到 State

dispatch({
  type: 'fetchCount',
  payload: this.form.data
})

三、开发结构

1、编写 UI Component

随着应用的发展，可能会在多个页面使用 UI 元素 (或在一个页面使用多次)，在 dva 里可以把这部分抽成 component 。

2、定义Model

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

一个Model对象的说明：

//导入自定义的service，service中包含要执行的异步请求函数queryLoginCount
import {
    queryLoginCount,
} from "./services/user";

export default {
	//当前 Model 的名称。connect时使用的
	//整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
    namespace: 'user',
    //该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
    state: {
    	name:"",
        loginCount: 0,
    },
    //Action 处理器，处理异步动作，再通过reducer同步更新state
    effects: {
        // Generator 函数查询登录次数，
		/(*
调用方式：
        * fetchCount({ payload }, { call, put }) {
        	 //执行service中的异步请求
             const response = yield call(queryLoginCount, payload);
             //发出一个action，通过reducer更新state
             yield put({
                type: 'saveCount',
                payload: response,
            });
               
        },
    },
    //Action 处理器，处理同步动作，用来算出最新的 State
    reducers: {
        saveCount(state, action) {
            return {
                ...state,
                loginCount: action.payload,
            };
        },
    },
}

3、Component和Model绑定、State更新

通过connect方法绑定一个或多个Model到Component；
通过dispatch方法发送action，调用Model中的处理器更新state，再刷新视图；

import { connect } from 'dva';

const App = (props) => {
	const {name,loginCount} = props;
	const onClickName = () => {
		dispatch({
			type:"fetchCount",
			payload:{
				name:name
			}
		})
	}
	return (
		<div onClick={onClickName}>
			{name}
			<p>登录次数：{loginCount}</p>
		</div>
	)
}
//绑定namespace为user的Model
export default connect({user} => ({name:user.name,loginCount:user.loginCount}))(App);

dva官网: DvaJS