dva
 
简介
dva的使用
在dva中同步路由到仓库
new dva(opts) opts 包含:
  
 


 链接: 
官方网站
 
简介
 
dva不仅仅是一个第三方库，更是一个框架，它主要整合了redux的相关内容，让我们处理数据更加容易，实际上，dva依赖了很多库：react，react-router，redux，redux-saga, connecte-react-router.
 
dva的使用
 
1.dva默认导出一个函数，通过调用该函数，可以得到一个dva对象
 
import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

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

// 3. Model启动之前定义模型
app.model(require('./models/example').default);

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

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

 
2.dva对象.router：传入一个函数，该函数返回一个React节点，将来，应用启动后，会自动渲染该节点。我们也可以直接传入一个函数组件。
 
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

 
3.dva对象.start：该方法用于启动dva应用程序，可以认为启动的就是react程序，该函数传入一个选择器，用于选中页面的某个dom元素，react会将该元素渲染到页面中去。
 
// 5. Start
app.start('#root');
 
4.dva对象.model：该方法用于定义一个模型，该模型可以理解为redux的action，reducer，redux-saga副作用处理的整合，整合成一个对象，将该对象传入model方法中即可。 
  
1.该模型应该具有的属性： 
    
1 .namespace：命名空间（会作为仓库中的属性保存）.
2 .state：该模型的默认值.
3 .subscriptions：配置为一个对象，该对象可以写任意数量的属性名称的属性，每个属性是一个函数，这些函数会在模型加入到仓库中后立即运行
4 .effects：处理副作用，底层使用redux-sage实现的，该属性配置为一个对象，该对象中的每一个方法均处理一个副作用，方法名即使匹配的action类型。
 
    
第一个参数：action.
第二个参数：封装好的redux-saga/effects的处理方法.
 
    
5 .reducers：该属性配置为一个对象，对象中的每一个方法就是一个reducer，dva约定，方法的名字就是匹配的action类型.
 
 
 

export default {

 namespace: 'example',

 state: {},

 subscriptions: {
   setup({ dispatch, history }) {  
   },
 },

 effects: {
   *fetch({ payload }, { call, put }) {  
     yield put({ type: 'save' });
   },
 },

 reducers: {
   save(state, action) {
     return { ...state, ...action.payload };
   },
 },

};

 
在dva中同步路由到仓库
 
调用dva是函数时，配置history对象
使用ConnectedRounter提供路由上下文
 
new dva(opts) opts 包含:
 
history: 指定给路由用的历史，默认为 hashHistory
initialState: 指定初始数据，优先级高于模型中的状态，默认为 {}
onError: effect执行错误或subscription通过done主动抛错时触发，可用于管理中断错误状态。
onAction: 在动作被调度时触发，用于注册redux中间件
onStateChange: state更改时触发，可用于同步state到localStorage，服务器端等。
onReducer:封装reducer执行。
onEffect: 封装效果执行。比如DVA加载基于此实现了自动处理负载状态
onHmr: 热替换相关，目前用于babel-plugin-dva-hmr
extraReducers: 指定额外的reducer，某种redux-form需要指定额外的formreducer：
extraEnhancers:指定额外的StoreEnhancer，某些结合redux-persist的使用：

定义：集成了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
 
简介：模型，dva通过model,更新state（reducer，同步），异步effect,订阅subscriptions 
定义一个，新建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);
 
 
 
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'
    })
  }
 
 
 
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，啥时候有数据，后做某事。
 
 
 
 
subscriptions:订阅数据源：如路由，当前时间，websocket,keyboard等
 
dva-loading：https://www.jianshu.com/p/61fe7a57fad4

DVA
 
通过dva-cli脚手架搭建一个dva项目，具体做法参考dva github dva-cli相关内容。
ignore *.iml 文件，此为是intellij idea的工程配置文件，不需要push到git中，被git管理
搭建router，url 和 页面的对应关系
搭建layout，所有的页面都是基于layout 页面，包括左边框，下面的footer等。
HMR（Hot Module Replacement）模块热替换, webpack 提供的功能 
 "env": { 
 "development": { 
 "extraBabelPlugins": [ 
 "dva-hmr" ]}}