如何通过props获取rule里的reducers产生的data，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
因为最近在写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的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
