189 8069 5689
如何通过props获取rule里的reducers产生的data，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
成都创新互联公司IDC提供业务:遂宁服务器托管,成都服务器租用,遂宁服务器托管,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。
因为最近在写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 etreeapp = Flask(__name__)CORS(app, supports_credentials=True)
然后这个时候页面就会重新render
render() { const source = this.props.rule.data; return ( //一堆组件信息 )}
我们在代码里就可以通过props获取rule里的reducers产生的data了。
看完上述内容，你们掌握如何通过props获取rule里的reducers产生的data的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！