如何通过props获取rule里的reducers产生的data
如何通过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 etree
app = Flask(__name__)
CORS(app, supports_credentials=True)
然后这个时候页面就会重新render
render() { const source = this.props.rule.data; return ( //一堆组件信息 )}
我们在代码里就可以通过props获取rule里的reducers产生的data了。
看完上述内容,你们掌握如何通过props获取rule里的reducers产生的data的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
文章标题:如何通过props获取rule里的reducers产生的data
地址分享:http://pwwzsj.com/article/pcpggs.html