如何通過(guò)props獲取rule里的reducers產(chǎn)生的data

發(fā)布時(shí)間：2022-01-04 17:06:04 來(lái)源：億速云閱讀：91 作者：柒染欄目：大數(shù)據(jù)

如何通過(guò)props獲取rule里的reducers產(chǎn)生的data，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

因?yàn)樽罱趯慳nt-design其中數(shù)據(jù)流向老是記不住，所以記個(gè)筆記，因?yàn)槲冶容^菜，有錯(cuò)誤的地方歡迎大佬們指出。

@connect(({rule, loading}) => ({    rule,//對(duì)應(yīng)的namespace    loading: loading.models.rule,}))export default class demo extends React.Component {    constructor(props) {        super(props);    }   ....一堆代碼    }

通過(guò)connect修飾之后的類就可以通過(guò)this.props獲取里面的值了。

這個(gè)時(shí)候我們可以獲取dispatch對(duì)象了

const { dispatch } = this.props;

然后dispatch使用方法如下

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

參數(shù)type的格式是model文件對(duì)應(yīng)的namespace 然后是對(duì)應(yīng)的方法名。

params是我們請(qǐng)求的參數(shù)。

接下來(lái)看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,            };        },    },};

根據(jù)dispatch的參數(shù)我們找到對(duì)應(yīng)的namespace:rule

*fetch：是一個(gè)異步函數(shù),async fetch 的簡(jiǎn)寫。接下來(lái)里面兩個(gè)參數(shù)

params就是我們上面dispatch的第二個(gè)參數(shù),call是用于調(diào)用request對(duì)應(yīng)的方法的。put是將結(jié)果，傳到下面的reducers里。

我們說(shuō)下這幾個(gè)參數(shù)怎么用

在看params怎么用之前我們看下getPage是怎么寫的

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

得知params是getPage的參數(shù),然后使用request做了一個(gè)請(qǐng)求。外面我們獲取到了response。

然后回到effects，put是把結(jié)果推送到reducers,參數(shù)type要求和reducers的函數(shù)名一致。

接下來(lái)是reducers，然后是它的兩個(gè)參數(shù)state和action。state就是我們?nèi)值膕tate,我們?cè)趓eturn的時(shí)候會(huì)重新加載state,

通過(guò)action.params可以獲取response,然后可以進(jìn)一步獲取其其他屬性，比如又進(jìn)行了一步獲取獲取數(shù)據(jù)其data屬性。

這個(gè)地方要重點(diǎn)提示一下:請(qǐng)求的時(shí)候一定要注意跨域的問(wèn)題，ant-desin有解決的跨域的方法不說(shuō)了，或者我們可以修改服務(wù)端。如果使用flask作為服務(wù)端，可以這樣

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

然后這個(gè)時(shí)候頁(yè)面就會(huì)重新render

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

我們?cè)诖a里就可以通過(guò)props獲取rule里的reducers產(chǎn)生的data了。

看完上述內(nèi)容，你們掌握如何通過(guò)props獲取rule里的reducers產(chǎn)生的data的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

如何通過(guò)props獲取rule里的reducers產(chǎn)生的data

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽