dua

dva based data flow!

Usage no npm install needed!

<script type="module">
  import dua from 'https://cdn.skypack.dev/dua';
</script>

README

dua

dua是封装的基于dva的数据流,主要是为了统一model的数据结构,减少大量重复性的创建model相关的代码

使用之前

对后端的API有一些要求,这些要求可以让数据更加统一

  • 后端返回的数据如果没有特殊的情况必须带上id字段
  • 所有的PUT个POST请求返回修改后的全量数据
  • 返回的数据保持统一的数据结构

单条数据

{
  code: 200,
  message: 'success',
  data: {
    id: '111',
    xxx
  }
}

多条数据

{
  code: 200,
  message: 'success',
  data: {
    list: [
      {
        id: '111',
        xxx
      }
    ],
    total: 1
  }
}

基础使用

  • 定义model文件
import { create } from 'dua';
//可以换成其他的请求库
import request from 'umi-request';

export const fetchUser = () => request.get('/users');

const model = create('user', {
  fetch: fetchUser,
});

export default {
  namespace: 'user', //umi3会对model文件进行识别,umi2不需要这个
  ...model,
};

  • 使用model

import React from 'react';
import { connect } from 'dva';
const Example = (props) => {
  const { users, dispatch } = props;
  React.useEffect(() => {
    dispatch({
      type: 'user/fetch',
    });
  }, []);
  return (
    <div>
      {users.map(i => (
        <div key={i.name}>{i.name}</div>
      ))}
    </div>
  );
};

export default connect(({ user }) => ({
  users: user.allIds,
}))(Example);

进阶使用(参考example)