Ant Design框架中不同的组件访问不同的models中的数据

Ant Design框架中不同的组件访问不同的models中的数据

本文记录了我在使用该框架的时候踩过的坑，方便以后查阅。

---

一、models绑定

在某个组件（控件或是页面），要想从某个models中获取数据，则必须在@connect中进行绑定，不管这个models是在同包下还是别的包下。因为每个models的namespace具有唯一性，所以可以任意绑定：

@connect(({ activity, stadiumList, loading }) => ({
  activity,
  stadiumList,
  submitting: loading.effects['activity/apiUpdateActivity2'],
}))
@Form.create()
class UpdateActivity extends PureComponent

可以看到，我定义了一个UpdateActivity的组件，该组件返回的是一个页面，该页面需要用到两个models中的数据，这两个models的namespace分别是：activity、stadiumList。正如上面所述，想要访问不同models，必须要在@connect中显式的生声明这两个models的namespace。

二、从models中取数据

然后要从中去数据的话，可行的办法有：

（1）只需要从里面读一个数据

    const {
      activity: { stadiumId },
    } = this.props;

这是从命名控件为activity的models中取出list这个数据（要知道，models只是装填数据的容器，就算绑定了这个models，它也不会将数据传给你，只能你自己主动的去取。但要注意，没有绑定的话，是访问不到这个models的）

（2）需要从里面读很多数据

const { activity } = this.props;

我可以直接从this.prop中取出这个models的全部内容，可以像以下这么用：

activity.id;
acitvity.name;
activity.list
等等

只要在这个models里的state里面定义了数据（如：id、name、list等），则都可以被访问到。

（3）models中的数据可以被绑定它的组件修改

  onChange4 = e => {
    const { activity } = this.props;
    activity.id = e.target.value;
  };
  onChange5 = e => {
    const { activity } = this.props;
    activity.label = e.target.value;
  };
  onChange6 = e => {
    const { activity } = this.props;
    activity.title = e.target.value;
  };

如上述代码所示，每个onChange方法均是Input框在触发onChange属性的时候调用的，可以看到，我先像（2）一样，从全局props中取出绑定的models，然后通过“activity.”的方式进行赋值。然后在提交表单时，我会在dispatch中这样写：

  handleSubmit = e => {
    const { dispatch } = this.props;
    const {
      activity: {
        allowWish,
        contactPhone,
        content,
        id,
        label,
        title,
        tips,
        holdOrganization,
        locationDes,
        stadiumId,
      },
    } = this.props;
    dispatch({
      type: 'activity/apiUpdateActivity2',
      payload: {
        allowWish,
        contactPhone,
        content,
        id,
        label,
        title,
        tips,
        holdOrganization,
        locationDes,
        stadiumId
    }

可以看到，我从models中取出这些被改变了的数据，并调用相应接口。这样做的好处就是，我不需要在本页面（即组件）的state中再定义一大堆数据，简化了代码。

注意：不同组件在互相通信时，需要在models中定义要传递的变量。而组件与后端通信时，不必在models中写出相应的变量，但通常可以显式的写出来，增加代码的可读性