本教程案例github:https://github.com/axel10/dva_demo-Counter-and-list/tree/master
这次主要通过在线获取用户数据并且渲染成列表这个案例来演示dva.js。
整个开发流程概括下来应该是:
编写用户列表model(数据模型)-> 编写修改model的方法 -> 编写服务接口 -> 编写组件 -> 将组件与dva.js连接 -> 将dva.js提供的接口(dispatch)和数据模型通过props传入组件 -> 渲染。
我们先从第一步开始。
编写用户列表model及修改方法:(src/models)
import * as userService from ‘../services/userService‘ export default { namespace: "users", state: { list:[] }, reducers: { //用来修改数据模型的state。 save(state, {payload:{data}}) { //涉及到es6的拆包写法。 state.list = data; return {...state} }, removeItem(state, {item}) { state.list = state.list.filter(function (lItem) { return item.id !== lItem.id }); return{...state} } }, effects: { //effects指的是涉及到异步请求的方法。通常用来调用服务获取数据。这里要注意如果effects的方法名与reducers中存在重复的话容易造成死循环。 * fetch(payload,{put, call}) { const data = yield call(userService.fatchData); yield put({type: "save", payload: data}) }, * fetchRemoveItem({item},{put,call}){ const result = yield call(userService.fetchRemoveItem,item.id); if (result){ console.log(true); yield put({type:"removeItem",item}) }else{ console.log(false); } } }, subscriptions: { //触发器。setup表示初始化即调用。其他用法见官方文档。https://github.com/sorrycc/blog/issues/62 setup({dispatch}) { dispatch({type: ‘fetch‘}) } } }
编写完毕后不要忘了在src/index.js中注册数据模型:
app.model(require(‘./models/users‘).default);
编写服务接口:(src/services/userService.js)
import request from "../utils/request"; export function fatchData() { return request("/api/users") } export function fetchRemoveItem(query) { console.log(query); return true }
这里涉及到mock数据。方法为修改根目录下的.webpackrc文件:
{ "proxy": { "/api": { "target": "http://jsonplaceholder.typicode.com/", "changeOrigin": true, "pathRewrite": { "^/api": "" } } } }
接下来编写组件:
先从路由组件开始:
import {connect} from ‘dva‘ import ListBody from "../components/ListBody" import React from "react"; class List extends React.Component { render() { return ( <ListBody {...this.props} /> //将自身的props传给子组件。连接之后的组件可以拥有dispatch、索引后的数据模型。 ) } } function mapStateToProps(state) { //将数据模型索引到props。 return {users:state.users} } export default connect(mapStateToProps)(List) //将组件与数据模型相连接。
这里要重点说明:dispatch就是在connect的时候传入的,用来做组件与数据模型之间的交互。
之后是ListBody组件:
import React from ‘react‘; import {Link} from ‘dva/router‘ class ListBody extends React.Component{ removeUserItem(item){ this.props.dispatch({type:"users/fetchRemoveItem",item}) //通过props获取dispatch方法,users表示数据模型(namespace),fetchRemoveItem表示reducers或者effects。 } render(){ const that = this; let userList = []; let userData = this.props.users.list; //users:数据模型,list:数据模型中的stateif (userData.length>=1){ userData.forEach(function (item, index) { userList.push(<li key={index} onClick={that.removeUserItem.bind(that,item)}>{item.name}</li>) }) }return( <div> <h2>请尝试点击条目。</h2> {userList} </div> ) } } export default ListBody;
完毕后添加路由。
import React from ‘react‘; import { Router, Route, Switch,Redirect } from ‘dva/router‘; import list from ‘./routes/list‘ function RouterConfig({ history }) { return ( <Router history={history}> <Switch> <Route path="/list" exact component={list} /> <Redirect to="/list"/> </Switch> </Router> ); } export default RouterConfig;