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中寫出相應的變量，但通常可以顯式的寫出來，增加代碼的可讀性