溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何通過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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
