UmiJS中使用DvaJS示例

需求

有一个products列表，从接口请求的，保存在model中，页面中展示这个列表

步骤

封装request

• 在src/目录下新建utils/目录

• 在src/utils/目录下新建request.js文件（封装统一的接口请求，这里我们用umi-request，当然可以用其他的，比如dva/fetch、axios）

/**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 * npm i umi-request --save
 */
import { extend } from 'umi-request';
import { notification } from 'antd';
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
/**
 * 异常处理程序
 */

const errorHandler = error => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }

  return response;
};
/**
 * 配置request请求时的默认参数
 */

const request = extend({
  errorHandler,
  // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});
export default request;

编写services

• 在src/services/目录下新建products.js文件

import request from '@/utils/request';
export async function getProductList(id) {
  return request(`/api/product/list?id=${id}`);
}
// export async function productEdit(params) {
//   return request('/api/product/edit', {
//     method: 'POST',
//     data: params,
//   });
// }

编写models

• 在src/models/目录下新建products.js文件

import { getProductList } from '../services/products';

export default {
  namespace: 'products',
  state: [],
  reducers: {
    setList(_, { payload: list }) {
      return list
    },
    delete(state, { payload: id }) {
      return state.filter(item => item.id !== id)
    }
  },
  effects: {
    *getList({ payload }, { call, put, select }) {
      const resp = yield call(getProductList, payload);
      yield put({
        type: 'setList',
        payload: resp,
      });
    }
  }
}

编写页面组件

• 在src/pages/目录下新建products/目录

• 在src/pages/products/目录下新建components/目录

• 在src/pages/products/components/目录下新建list.jsx文件

import React from 'react';

import { Table, Popconfirm, Button } from 'antd';

const ProductList = ({ onDelete, products }) => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name'
    },
    {
      title: 'Actions',
      render: (text, record) => {
        return (
          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        );
      }
    }
  ]
  return <Table dataSource={products} columns={columns}></Table>
}

export default ProductList;

• 在src/pages/目录下新建index.jsx文件

import React, { Component } from 'react';
import ProductList from './components/list'

class Products extends Component {
  render() {
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList></ProductList>
      </div>
    );
  }
}

export default Products

connect连接model和view

• 修改src/pages/index.jsx文件，添加connect

import React, { Component } from 'react';
import { connect } from 'dva';
import ProductList from './components/list'

@connect(
  ({ products }) => ({ products })
)
class Products extends Component {
  handleDelete(id) {
    this.props.dispatch({
      type: 'products/delete',
      payload: id
    });
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'products/getList',
      payload: 100
    })
  }
  render() {
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={this.handleDelete} products={this.props.products}></ProductList>
      </div>
    );
  }
}

export default Products