經過Dva中的model、Reducer、Effect、Generator在項目中的實現

View視圖層文件：UserPage.jsx

import React, { Component } from 'react';
import UserUI from '../components/userUI'
import {connect} from 'dva'
// import {reqCnode} from '../services/example'
class UserPage extends Component{
    handlerBack = () =>{
        console.log(this.props);
        this.props.history.push('/')
    }
    handlerChangeName = () =>{
        console.log(this.props);
        this.props.dispatch({
            type:'IndexText/setName',
            payLoad:{
                name:'檸檬啊'
            }
        })
    }
    handlerGetData = () =>{
        this.props.dispatch({
            type:'IndexText/reqCnodeFn'
        })
    }
    componentDidMount(){
        // reqCnode().then(res=>console.log('reqCnode請求結果',res))
    }
    render(){
        console.log(this.props.state)
        const {name,cNodeData} = this.props.state
        return(
            <div>
                我是user頁
                <button onClick={this.handlerBack}>回首頁</button>
                <UserUI></UserUI>
                <div>
                   {this.props.msg} <br/>
                    {name}
                </div>
                <button onClick={this.handlerChangeName}>更更名字</button>
                <button onClick={this.handlerGetData}>發請求獲取參數</button>
                {
                    cNodeData.map(item=>(
                        <div key={item.id}>
                            {item.title}
                        </div>
                    ))
                }
            </div>
        )
    }
}
const mapStateToProps = (state) =>{
    console.log('123',state)
    return{
        msg:'abc',
        state:state.IndexText
    }
}

export default connect(mapStateToProps)(UserPage);

Model文件 IndexText.js

import {reqCnode} from '../services/example'
export default{
    namespace:'IndexText',
    state:{
        name:'西柚',
        cNodeData:[]
    },
    reducers:{
        setName(state,payLoad){
            let _state = JSON.parse(JSON.stringify(state));
            _state.name = payLoad.payLoad.name;
            return _state;
        },
        setCnodeData(state,payLoad){
            let _state = JSON.parse(JSON.stringify(state));
            _state.cNodeData = payLoad.data
            return _state;
        }
    },
    effects:{
        *reqCnodeFn({payLoad},{put,call}){
            const result = yield call(reqCnode);
            if(result.data){
                yield put({
                    type:'setCnodeData',
                    data:result.data.data
                })
            }
        }
    }
}

數據請求 example.js

import request from '../utils/request';
const proxy = '/apis'

export function query() {
  return request('/api/users');
}

export function reqCnode(){
  return request(proxy + '/api/v1/topics');
}

配置代理 .webpackrc

{
    "proxy":{
        "/apis":{
            "target":"https://cnodejs.org",
            "changeOrigin":true,
            "pathRewrite":{
                "^/apis":""
            }
        }
    }
}

---

以爲對本身有幫助就點個贊👍呀。