dva的用法_dva.js 用法详解：列表展示

这次主要通过在线获取用户数据并且渲染成列表这个案例来演示dva.js。

整个开发流程概括下来应该是：

编写用户列表model(数据模型)->  编写修改model的方法 -> 编写服务接口 ->  编写组件 ->  将组件与dva.js连接 -> 将dva.js提供的接口(dispatch)和数据模型通过props传入组件 -> 渲染。

我们先从第一步开始。

编写用户列表model及修改方法：(src/models/users.js)

import * as userService from '../services/userService'exportdefault{

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}) {