dva数据流向

KuaiShouTaskList.js为例

关于connect装饰器

// connect装饰器将页面和model链接起来，
// 第一个参数将page层和model层链接，并且将返回的数据绑定到this.props
// 第二个参数dispatch(内置函数)不仅可以将返回的数据绑定到this.props,还能调用model层定义的函数
@connect(({ rule, loading }) => ({
  rule,
 loading: loading.models.rule,
}))

通过connect修饰之后的类就可以通过this.props获取里面的值了

这里我们没有使用到第二个参数，我们在下面的
KuaiShouTaskList类中通过const { dispatch } = this.props;
获取到dispatch之后再定义的。

dispatch({
  // namespace+"/"+指定的函数名
  type: 'rule/fetchkuaishoutask',
  payload: params,
});

type的路径格式就是上面备注的那个

他是根据models/rule.js文件

export default {
  namespace: 'rule',   //表示对于整个应用不同的命名空间,以便通过this.props.rule访问，和当前model文件名相同就好之前的reducer名字相同，是全局state的属性，只能为字符串，不支持.的方式建立多重

  state: {
    // 表示这个models下存储的数据
    data: {
      list: [],
      pagination: {},
    },
  },
effects: {
//  异步加载数据，*定义异步方法
*fetchkuaishoutask({ payload, callback }, { call, put }) {
  const response = yield call(queryKuaiShouTask, payload);
  // 调用reducers中的函数，进而更新数据
  yield put({
    type: 'save',
    payload: response,
  });
  if (callback) callback();
},
},
  reducers: {
    // state更新之前的状态数据,通过return返回更新后的
    save(state, action) {
      return {
        ...state,
        data: action.payload, // 把请求的结果放到state的list里面
      };
    },
  },
};