ant-design-pro开发说明 --数据请求

最新推荐文章于 2024-01-04 20:52:51 发布

徐徐沁风

最新推荐文章于 2024-01-04 20:52:51 发布

阅读量3.9k

点赞数 2

本文链接：https://blog.csdn.net/refresh711/article/details/84957368

版权

ant-design-pro开发中，数据请求通常在src/page/list/basiclist.js文件中通过dispatch发起model的action。请求处理位于src/models/list.js的effects方法，这里可以调用services进行异步操作。fetch已经被封装，只需传参调用对应API。异步数据更新state后，会触发已连接的容器组件重新渲染，数据通过this.props.namespace.data获取。

摘要由CSDN通过智能技术生成

ant-design-pro开发说明 --数据请求

数据请求：

我们由src/page/list/basiclist.js文件为例：
由dispatch发起model的里action请求：

handleSubmit = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    const { current } = this.state;
    const id = current ? current.id : '';

    setTimeout(() => this.addBtn.blur(), 0);
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        done: true,
      });
      //触发action的相关model层的state初始化
      dispatch({
        type: 'list/submit',
        //携带参数传递给后端
        payload: { id, ...fieldsValue },
      });
    });
  };

  deleteItem = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'list/submit',
      payload: { id },
    });
  };

进入src/models/list.js文件中调用model的effects方法(相当于redux的middleware)