如何通過props獲取rule里的reducers產生的data，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
成都創(chuàng)新互聯(lián)公司IDC提供業(yè)務:遂寧服務器托管,成都服務器租用,遂寧服務器托管,重慶服務器租用等四川省內主機托管與主機租用業(yè)務;數(shù)據(jù)中心含:雙線機房,BGP機房,電信機房,移動機房,聯(lián)通機房。
因為最近在寫ant-design其中數(shù)據(jù)流向老是記不住，所以記個筆記，因為我比較菜，有錯誤的地方歡迎大佬們指出。
重慶分公司
重慶分公司
@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},});
參數(shù)type的格式是model文件對應的namespace 然后是對應的方法名。
params是我們請求的參數(shù)。
接下來看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ù)我們找到對應的namespace:rule
*fetch：是一個異步函數(shù),async fetch 的簡寫。接下來里面兩個參數(shù)
params就是我們上面dispatch的第二個參數(shù),call是用于調用request對應的方法的。put是將結果，傳到下面的reducers里。
我們說下這幾個參數(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做了一個請求。外面我們獲取到了response。
然后回到effects，put是把結果推送到reducers,參數(shù)type要求和reducers的函數(shù)名一致。
接下來是reducers，然后是它的兩個參數(shù)state和action。state就是我們全局的state,我們在return的時候會重新加載state,
通過action.params可以獲取response,然后可以進一步獲取其其他屬性，比如又進行了一步獲取獲取數(shù)據(jù)其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的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
