TyranitarX Connect.

Antd总结

前端
Word count: 266Reading time: 1 min
2020/04/07 Share

最近写了一段时间的react+antd 踩了不少坑 在这记录一下。

1. dvaJS相关

关于dispatch和connect

dva数据流向图

在组件中通过connect将组件与model相连

1
2
3
4
@connect(({ dashboardAnalysis, loading }) => ({
  dashboardAnalysis,
  loading: loading.effects['dashboardAnalysis/fetch'],
}))

从中能够取到dispatch,能够进入model控制数据流

1
2
3
4
5
6
const { dispatch } = this.props;
	/*dispatch({
        type: 'dashboardAnalysis/fetch', model中的数据流
        payload :this.jsondata 传入参数
      });
	*/
关于model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const Model = {
	//namespace 唯一且可利用namspace在组件中connect获得相应数据
  namespace: 'dashboardAnalysis',
  state: initState,
  effects: {
  	//effects通过引入service进行请求 yield call（请求接口，请求参数）
    *fetch({ payload }, { call, put }) {
      const response = yield call(fakeChartData,payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },

    *fetchTemperReal(_, { call, put }) {
      const response = yield call(fakeChartDataTemperReal);
      yield put({
        type: 'save',
        payload: response,
      });
    },

    *fetchSalesData(_, { call, put }) {
      const response = yield call(fakeChartData);
      yield put({
        type: 'save',
        payload: {
          salesData: response.salesData,
        },
      });
    },
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },

    clear() {
      return initState;
    },
  },
};
关于service
1
2
3
4
5
6
export async function fakeChartData(params) {
  return request('/请求地址',{
      method:'post',
      data:params
  });
}

Author：TyranitarX

原文链接：http://tyranitarx.github.io/2020/04/07/antd/

发表日期：April 7th 2020, 10:34:24 am

更新日期：April 7th 2020, 10:40:51 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 1. dvaJS相关
    1. 1.1. 关于dispatch和connect
    2. 1.2. 关于model
    3. 1.3. 关于service
Total : 20
2020
2019
machine learning deep learning TensorFlow 前端 算法