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了。