[TOC] ### 1. 創建點擊事件并派發action ~~~ import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; function IndexPage(props) { const handlerequest= () => { console.log(1) props.dispatch({ type: 'example/requestdata', payload: {//可以不填 }, }) } console.log(props.list) return ( <div className={styles.normal}> <div onClick={handlerequest}>數據請求</div> </div> ); } //connect用于連接models和組件 export default connect(({ example }) => { return { //接收models的state中的數據 list: example.list, } })(IndexPage); ~~~ ### 2. 創建數據請求 ~~~ import request from '../utils/request'; export function query() { return request('https://www.easy-mock.com/mock/5bac6e450132334db716717d/test/test');//get 不跨域 /* return request(`接口地址`,{ method: 'post', headers: { 'Content-Type': 'application/json; charset=utf-8' }, body: JSON.stringify({ 參數名：參數 }) }) */ } ~~~ ### 3. 數據處理（重點） ~~~ //引入并給services>example.js中要返回的函數取個別名， import * as querys from '../services/example'; export default { namespace: 'example', state: { list: '', }, subscriptions: { setup({ dispatch, history }) { //監聽路由變化，根據不同的路由調用不同的effects中的事件，再通過put調用reducers中的事件，從而更新state return history.listen(({ pathname }) => { if (pathname === '/') { dispatch({ type: 'fetch' }); } }); }, }, effects: { //根據路由情況執行的代碼 *fetch({ payload }, { call, put }) { // eslint-disable-line //調用引入的數據請求函數 const result = yield call(querys.query);//如果使用 {參數} ，則是一個對象 yield put({ type: 'save' , payload:{ list: result.data //網絡返回的要保留的數據 }}); }, //通過事件觸發的數據請求 *requestdata({ payload }, { call, put }) { // eslint-disable-line //調用引入的數據請求函數 const result = yield call(querys.query);//如果使用 {參數} ，則是一個對象 yield put({ type: 'save' , payload:{ list: result.data //網絡返回的要保留的數據 }}); }, }, reducers: { save(state, action) { console.log('save') return { ...state, ...action.payload }; }, }, }; ~~~