dva实践

学习react,快速入门的练习

创建引用可以直接使用dva-cli的各项命令快速创建项目.

项目开始前的配置:

1. 配置antd

   npm i antd --save
   npm i babel-plugin-inmport --save-dev  //按需加载插件
   

   2. 在.roadhogrc 的"exreaBabelPlugins"里加上语句
      ["import", { "libraryName": "antd", "style": "css" }]

dva-cli 的常用命令
dva g model users
dva g component Mainlayout/Header

使用封装的loading

安装:cnpm i dva-loading --save

切换路由:

 dispatch(routerRedux.push({
    pathname:'/users',
    query:{page},
  }))

• ES6 写法

import React, { Component, PropTypes } from 'react';
import { Popover, Icon } from 'antd';

class PreviewQRCodeBar extends Component { // 组件的声明方式
  constructor(props) { // 初始化的工作放入到构造函数
    super(props); // 在 es6 中如果有父类，必须有 super 的调用用以初始化父类信息

    this.state = { // 初始 state 设置方式
      visible: false,
    };
  }
  // 因为是类，所以属性与方法之间不必添加逗号
  hide() {
    this.setState({
      visible: false,
    });
  }

  handleVisibleChange(visible) {
    this.setState({ visible });
  }

  render() {
    const { dataurl } = this.props;
    return (
      <Popover
        placement="rightTop"
        content={<img src={dataurl} alt="二维码" />}
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange.bind(this)} // 通过 .bind(this) 来绑定
      >
        <Icon type="qrcode" />
      </Popover>
    );
  }
}
// 在 react 写法中，直接通过 propTypes {key:value} 来约定
PreviewQRCodeBar.proptypes = {
  dataurl: PropTypes.string.isRequired,
};

// 在 ES6 类声明中无法设置 props 只能在类的驻外使用 defaultProps 属性来完成默认值的设定
// 而在 react 中则通过 getDefaultProps(){} 方法来设定
PreviewQRCodeBar.defaults = {
  // obj
}

export default PreviewQRCodeBar;

• Stateless 写法

import React, { PropTypes } from 'react';

// 组件无 state，pure function
const PreviewDevToolWebview = ({ remoteUrl }) => // 箭头函数，结构赋值
  <webview className={devToolWebview.devToolWebview} src={remoteUrl} />;

PreviewDevToolWebview.proptype = {
  remoteUrl: PropTypes.string.isRequired,
};

export default PreviewDevToolWebview;

// 此类组件不支持 ref 属性，没有组件生命周期的相关的时候和方法，仅支持 propTypes
// 此类组件用以简单呈现数据

理解dva中的数据流

pic

如何来理解呢?

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

Action

Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。** 需要注意的是 dispatch 是在组件 connect Models以后，通过 props 传入的。**

dispatch({
  type: 'user/add', // 如果在 model 外调用，需要添加 namespace
  payload: {}, // 需要传递的信息
});

以上调用函数内的对象就是一个 action。

dispatch 函数

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

dva - Reducer

在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值，与当前 reducers 中的值进行运算获得新的值（也就是新的 state）。需要注意的是 Reducer 必须是纯函数。

app.model({
  namespace: 'todos', //model 的 namespace
  state: [], // model 的初始化数据
  reducers: {
    // add 方法就是 reducer，可以看到它其实非常简单就是把老的 state 和接收到的数据处理下，返回新的 state
    add(state, { payload: todo }) {
      return state.concat(todo);
    },
  },
};

dva - Effect

Effect 被称为副作用，在我们的应用中，最常见的就是异步操作，Effects 的最终流向是通过 Reducers 改变 State。

核心需要关注下 put, call, select。

app.model({
  namespace: 'todos',
  effects: {
    *addRemote({ payload: todo }, { put, call, select }) {
      const todos = yield select(state => state.todos); // 这边的 state 来源于全局的 state，select 方法提供获取全局 state 的能力，也就是说，在这边如果你有需要其他 model 的数据，则完全可以通过 state.modelName 来获取
      yield call(addTodo, todo); // 用于调用异步逻辑，支持 promise 。
      yield put({ type: 'add', payload: todo }); // 用于触发 action 。这边需要注意的是，action 所调用的 reducer 或 effects 来源于本 model 那么在 type 中不需要声明命名空间，如果需要触发其他非本 model 的方法，则需要在 type 中声明命名空间，如 yield put({ type: 'namespace/fuc', payload: xxx });
    },
  },
});

dva - Subscription

Subscriptions 是一种从 源 获取数据的方法，它来自于 elm。

Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent(dispatch) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

dva - Router

这里的路由通常指的是前端路由，由于我们的应用现在通常是单页应用，所以需要前端代码来控制路由逻辑，通过浏览器提供的 History API 可以监听浏览器url的变化，从而控制路由相关操作。

dva 实例提供了 router 方法来控制路由，使用的是react-router。

import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

在 dva 中我们通常以页面维度来设计 Container Components。

所以在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）。

** 通过 connect 绑定数据 **

比如：

import { connect } from 'dva';
function App() {}

function mapStateToProps(state, ownProps) { // 该方法名已经非常形象的说明了 connect 的作用在于 State -> Props 的转换，同时自动注册一个 dispatch 的方法，用以触发 action
  return {
    users: state.users,
  };
}
export default connect(mapStateToProps)(App);

然后在 App 里就有了 dispatch 和 users 两个属性。