dva实践
学习react,快速入门的练习
创建引用可以直接使用dva-cli的各项命令快速创建项目.
项目开始前的配置:
-
配置antd
npm i antd --save npm i babel-plugin-inmport --save-dev //按需加载插件- 在
.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中的数据流
如何来理解呢?
在 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 两个属性。
