[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 }; }, }, }; ~~~