React dva Model案例

1、路径： /src/routes/IndexPage.js

import React from 'react';
import { connect } from 'dva';
// 引入接口
import * as apis from '../services/example';
import styles from './IndexPage.css';

class IndexPage extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      
     };
  }

  handleSetName=()=> {
    console.log(this.props)
    this.props.dispatch({
      //调用Model 中的方法 （setName）
      type:"indexTest/setName", // 命名空间加上方法名
      data: {
        name: "zhuzhuxia"
      }
    })
  }

  handleSetNameAsync=()=> {
     this.props.dispatch({
      type:"indexTest/setNameAsync",
      data: {
        name: "zhuzhuxia"
      }
    })
  }

  componentDidMount() {
    apis.testCnode().then((res) => {
      console.log(res);
    })
  }
  testCnode=()=> {
    this.props.dispatch({
      type:"indexTest/testCnode"
    })
  }


  render() {
    console.log(this.props.msg)
    console.log(this.props.cnodeData);

    return (
      <div>
        我是首页 
        {this.props.msg}
        {this.props.name}
      </div>
      <button onClick={this.handleSetName}>setName</button>
      <button onClick={this.handleSetNameAsync}>setNameAsync</button>
      <button onClick={this.testCnode}>testCnode</button>
    );
  }
}
const mapStateToProps =(state)=> {
  // mapStateToProps 是一个函数 用于建立组件跟store 和state 的映射关系
    console.log(state);
    return {
      msg: "" ,
      name:state.indexTest.name,
      cnodeData:state.indexTest.cnodeData
    }

}
export default IndexPage;

export default connect()(IndexPage);

2、/src/models/indexTest.js

export default {
  namespace: "indexTest", // model的命名空间 
  state: { //初始值
    name: "",
    cnodeData:{}
  },
  reducers: { 
    //  以key/value 格式定义的reducer 用于处理同步操作 
    // 唯一可以修改 state 的地方  由action 触发 
    setName(state, payload) {
      // payload组件返回来的参数
      // state 保存数据到state 
      let state = JSON.parse(JSON.stringfy(state));

      console.log("我被IndexPage调了 ");
      console.log(payload.data.name);

      _state.name = payload.data.name;
      return _state;
    },
    setCnodeDataList(state, payload){
        let state = JSON.parse(JSON.stringfy(state));

        return _state;
    },

    testPath(state, ) {

    },

    effects: {
      // 用于处理异步操作和业务逻辑  不直接修改state 由action 触发 
      //  可以触发 action  可以和服务器交互  可以获取全局 state 数据
      *setNameAsync({payload},{put, call}) {
       yield put({
          type: "setName",
          data: {
            name: "超人强"
          }
        })

         yield  console.log("run");

      }

      *testCnode({payload},{put, call}) {
      let rel = yield call(apis.testCnode)
      if (rel.data) {
        console.log(rel.data.data);
        yield put({
          type: "setCnodeDataList",
          data:rel.data.data
        })
      }
      console.log(rel);
      },
      subscriptions: {
        // 订阅一个数据源 然后根据需要dispatch 相应的action 
        test({dispatch, history}) {
          //  监听history 变化  当进入 `/` 时触发
         history.listen(({pathname})=> {
           if (pathname === "/user") {
             console.log("用户页")
             dispatch({
               type:"testPath"

             })
           }
         })
        }
      }
    }
  }
}

3、这篇是实例
看上面这篇连我自己都看不懂 比较教材化 不是实例