ant-design使用笔记之数据流向-技术圈

因为最近在写ant-design其中数据流向老是记不住，所以记个笔记，因为我比较菜，有错误的地方欢迎大佬们指出。

@connect(({rule, loading}) => ({    rule,//对应的namespace    loading: loading.models.rule,}))export default class demo extends React.Component {    constructor(props) {        super(props);    }   ....一堆代码    }

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

这个时候我们可以获取dispatch对象了

const { dispatch } = this.props;

然后dispatch使用方法如下

dispatch({  type: 'rule/fetch',  params: {url: fullUrl},});

参数type的格式是model文件对应的namespace 然后是对应的方法名。

params是我们请求的参数。

接下来看model文件的东西

export default {    namespace: 'rule',    state: {       //在这里面写state    },    effects: {        *fetch({params, callback}, {call, put}) {            const response = yield call(getPage, params);            yield put({                type: 'save',                params: response,            });            if (callback) callback();        },
    },
    reducers: {        save(state, action) {            return {                ...state,                data: action.params.data,            };        },    },};

根据dispatch的参数我们找到对应的namespace:rule

*fetch：是一个异步函数,async fetch 的简写。接下来里面两个参数

params就是我们上面dispatch的第二个参数,call是用于调用request对应的方法的。put是将结果，传到下面的reducers里。

我们说下这几个参数怎么用

在看params怎么用之前我们看下getPage是怎么写的

import {request} from 'umi';import {stringify} from 'qs';export async function getPage(params) {    return request(`http://localhost:6200/?${stringify(params)}`)}

得知params是getPage的参数,然后使用request做了一个请求。外面我们获取到了response。

然后回到effects，put是把结果推送到reducers,参数type要求和reducers的函数名一致。

接下来是reducers，然后是它的两个参数state和action。state就是我们全局的state,我们在return的时候会重新加载state,

通过action.params可以获取response,然后可以进一步获取其其他属性，比如又进行了一步获取获取数据其data属性。

这个地方要重点提示一下:请求的时候一定要注意跨域的问题，ant-desin有解决的跨域的方法不说了，或者我们可以修改服务端。如果使用flask作为服务端，可以这样

from flask_cors import *from lxml import etree
app = Flask(__name__)CORS(app, supports_credentials=True)

然后这个时候页面就会重新render

    render() {        const source = this.props.rule.data;        return (				//一堆组件信息			)}

我们在代码里就可以通过props获取rule里的reducers产生的data了。