Dva

定义：集成了react-router,fetch,readux,redux-saga等，轻量级框架。作用：简化开发体验，相对于saga

使用：安装 dva-cli

 npm install dva-cli -g  全局安装
 dva new 项目名 ，创建
 npm start

目录简介：

mock:模拟数据，

service:请求

routers:根pages，定义一些路由中使用的组件，对应起来。

router.js:路由，其中像

import { Router, Route, Switch } from 'dva/router';
等还有Link,withRouter
export default withRouter(Child);//注入路由，

index.js：入口
 

import dva from 'dva';
// import createHistory from 'history/';
import {createBrowserHistory as createHistory} from 'history'
import './index.css';

// 1. Initialize
// const app = dva();
//由history改为browserHistory(特点，无#，和浏览器API类似，react官方推荐),
const app = dva({
  history: createHistory(),
});

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

model

1. 简介：模型，dva通过model,更新state（reducer，同步），异步effect,订阅subscriptions 
2. 定义一个，新建model

   model下
   export default {
     namespace:'test',//命名空间，唯一，全局state的key
     state:{//初始值
       name:'cy'
     }
   }
   index.js
   // 3. Model
   // app.model(require('./models/example').default);
   app.model(require('./models/test').default);//载入，使用
   
   页面：转为props的属性，
   import {connect} from 'dva'
   componentDidMount() {
     console.log(this.props)
   }
   const mapStateToProps = state =>{
     console.log(state)
     return{
       name:state.test.name//从命名空间拿到
     }
   }
   export default connect(mapStateToProps)(UserPage);

    

3. reducer：等同redux的reducer，接收action，更新state（同步）

   model
     reducers: {
       setName(state,payload){
         console.log(state,payload)//payload,就是 dispatch传入的那个对象{type:'',name:'zq'}
         let _state=JSON.parse(JSON.stringify(state));//多一步，是因为react中state不允许直接修改，新建个常量
         _state.name=payload.name;
         return _state//必须返回奥，不然看报错
       }
     }
   页面：通过this.props.上的dispatch方法
     handlerSetName =()=>{
       this.props.dispatch({
         type:'test/setName',
         name:'zq'
       })
     }

    

4. effect

     effects:{
       *setNameAsync(payload,{put,call}){
         yield put({
           type:'setName',
           name:payload.name
         })
       }
     }
   页面
     handlerSetNameAsync =()=>{
       this.props.dispatch({
         type:'test/setNameAsync',
         name:'bb'
       })
     }

   call
    

     state:{
       name:'cy',
       topPicList:[]//初始化，接收数据
     },
     reducers: {
       getTopicListR(state,payload) {拿到数据更新到state
         let _state=JSON.parse(JSON.stringify(state));//多一步，是因为react中state不允许直接修改
         _state.topPicList=payload.topPicList;
         return _state;
       }
     },
    effects:{
       *getTopicList(payload,{put,call}){
         let res=yield call(cNodeTopic);//拿到数据，放到state上，state更新用的reducer
         console.log(res)
         if(res.data){//啥时候拿到，去用put
           yield put({//一个action
             type:'getTopicListR',//reducer
             topPicList:res.data
           })
         }
       }
     }
   
   页面
     getTopicList=()=>{
       this.props.dispatch({
         type:'test/getTopicList',
         params
       })
     }
   const mapStateToProps = state =>{
     console.log(state)
     return{
       name:state.test.name,
       topPicList:state.test.topPicList//这里可以转换为props
     }
   }
   
   异步，一般用if，啥时候有数据，后做某事。

    

5. subscriptions:订阅数据源：如路由，当前时间，websocket,keyboard等

6. dva-loading：https://www.jianshu.com/p/61fe7a57fad4