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

本教程案例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/users.js）

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：数据模型中的state

　　if (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;