ant-design-pro Notes(2)

继续学习ant-design-pro
可以一天不吃饭，但，，，不能一天不敲代码ヽ(｀Д´)ﾉ︵ ┻━┻ ┻━┻

一、数据流

图解：

1. 每个路由对应的是页面组件，所以需要和model connect的组件都是页面组件，model里是当前路由所有的状态

2. 当组件发起的同步的action时，直接走reducer；发起异步的action，先走effects，再以action的形式传给reducer，effects负责异步的操作，执行所有需要向服务器请求数据的操作

3. subscribtions用于订阅一个数据源，一般用来监听路由变化

数据源可以是当前的时间、键盘事件、history路由变化等

例：路由跳转test页面时，发起请求获取数据

//目前还不清楚history的来源
subscriptions: {
    setup: ({ history, dispatch }) =>history.listen(
    //括号内应该是location
    ({ pathname, query }) => {
        if (pathname === '/test') {
          dispatch({ type: 'fetch', payload: { query })
        }
    }
  )
}

二、页面通信

要想实现两个页面组件间的通信，dispath时，dispatch相应model的action即可。

//pageA.js
dispatch({type:'pageBmodel/action1',payload:xxx})

这样就实现了，在A页面组件中给B页面connect的model发送一个action，从而改变Bmodel的state

三、loading

antd-pro自带了loading组件，需要使用时在connect中加入参数即可

@connect(({ testModel, loading }) => ({
  testModel,
  loading: loading.models. testModel,
}))
/********************************/
//dva 中的loading
loading: {
  global: false,
  models: {app: false},
  effects: {app: false}
}

loading 有三个方法

1. loading.effects['test/fetch'] 为监听单一异步请求状态，当页面处于异步加载状态时该值为 true，当页面加载完成时，自动变为 false。
2. loading.global() 监听所有页面的异步请求的状态。
3. loading.models.testModel 监听当前model的异步请求

四、connect的使用

antd-pro里connect使用的是语法糖@connect，使用时要在export之前，并且页面中只能有一个定义的组件

五、路由

1. 获取路由参数（？？antd-pro中怎么获取还不清楚，路由在router.config.js中都写死了）
   xxxx/user/:id
   this.props.match.params.id 可以获取路径的值
2. 页面内跳转路由
   方式一：this.props.history.push("/")
   方式二：
   import {Link} from “dva/router”;
   <Link to="/"></Link>
   方式三：withRouter
   不是所有组件都直接与路由相连（比如首页，都是通过url来直接进入的，不是通过路由跳转），使用withRouter就可以给此组件传入路由参数，可以通过this.props来使用
   一般控制台报 this.props.history为undefined的错误时，就要使用 withRouter 将 history 传入到组件 props上
   使用：export default withRouter（App）
3. model中跳转路由

//在model中引入路由
import { routerRedux } from 'dva/router';
...
effects: {
    //跳转路由
    *redirect ({ payload }, { put }) {
      yield put( routerRedux.push(`/xxxxx/newTest?page=${payload}`, { param }));
    }，
    //接收参数
    *test({ payload }, { call, put }) {
       yield put({ type: xxxx, payload })
    }
  },
subscriptions: {
    setup ({ dispatch, history }) {
      history.listen(( location ) => 
        dispatch({
          type: 'test',
          payload: location.state,//路由跳转时携带的参数
        })
      });
    },
  },
...
//组件中
xxxFunction( page ) {
  this.props.dispatch({
        type: 'model/redirect',
        payload: page
      })
}