dva初步认识

创建项目及引入

1、$ npm install dva-cli -g //安装dva脚手架,已经安装忽略此步骤
2、$ dva new myapp // 创建项目
3、$ cd myapp // 进入项目根目录
4、$ npm start // 启动项目

创建完成后可以看到项目的目录结构

在src中的index.js文件中将dva引入

import dva from 'dva';

至此，引入工作已经完成。

如何使用

可以看到项目创建完成以后，在src文件夹下的index.js文件中已经介绍了初步使用

我们想要初步使用它必须要了解上图中的 3、4这两部分，下面逐一介绍。

• Model
  Model分为 ：namespace(命名空间)、state、subscriptions、reducers、effects
  初步使用基本用不到subscriptions
  官方示例中的model是这样的
  
  namespace就是命名空间为了你再调用方法时可以具体的找到这里，state就是状态，reducers与redux中的reducer是基本相同的用来处理数据，effect则是用来处理异步请求的
• Router
  Router也就是路由，没什么好说的。
  新建一个Model并引入看一下效果

const Model = {
    namespace:'test', //命名空间
    state:{
      num:1,
      list:[]
    },
    reducers : {
      // reducers内的方法都需要返回一个新的state
      add(state){
      // 这里把state深拷贝一份，不然会认为返回的是旧的state，
      // 相当于没有发生变化视图就不会更新，亦或者可以return {...state}
        const newState = JSON.parse(JSON.stringify(state)) 
        newState.num = newState.num + 1;
        return newState;
      },
      slice(state){
        const newState = JSON.parse(JSON.stringify(state))
        newState.num = newState.num - 1;
        return newState;
      },
      save(state,action){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list = action.payload
        return newState;
      }
    },
    effects : {
      // 这里面处理异步请求操作，暂且用假数据代替
      *fetchList(_, { call, put }){
        // const response = yield call(queryUsers);
        const response = [
          {key:1,book:'情深深雨蒙蒙',value:'琼瑶'},
          {key:2,book:'骆驼祥子',value:'老舍'},
          {key:3,book:'格列佛游记',value:'乔纳森斯威夫特'},
          {key:4,book:'西游记',value:'吴承恩'},
          {key:5,book:'红楼梦',value:'施耐庵'},
          {key:6,book:'PZC的爸爸是',value:'串串'}
        ]
        yield put({
          type: 'save',
          payload: response,
        });
      }
    }
  }
  
  export default Model

新建一个组件Index.jsx来看下效果

看下控制台打印出来的state究竟是什么样子的
可以看出state中有一个以 ‘test’命名的对象里面包含着上面我们新建的Model的state中数据

再来试一下如何发送异步请求

// 通过connect连接以后我们就可用dispatch来调用Model中的函数了
// dispatch接受一个参数action,是一个对象，该对象包含{type:'',payload:''}
// type是你要调用的命名空间和函数名称，就该例来说 应该写成 {type:'test/fetchList'}
// payload是你要荷载的参数就是想要传递过去的参数
this.props.dispatch({type:'test/fetchList'})

看下现在的控制台打印出来的state是什么样子的
可以看出dispatch调用了fetchList这个函数，假设response是我们异步调用拿到的返回值，拿到返回值以后我们通过yield put调用了reducers里面得save方法，这样就更新了状态了，接下来就可以使用这些数据了

// 我们可以在mapStateToProps这个函数中将state的值映射到props中
const mapStateToProps = (state) => {
    return {
        list:state.test.list
    }
}

这就是新建组件后想要使用的完整代码

import {Component} from 'react'
import {connect} from 'dva'

class Index extends Component {
    componentDidMount(){
        this.props.dispatch({type:'test/fetchList'})
    }
    render(){
        return (
            <div>
                {
                    this.props.list.map( item => <p key={item.key}>书名:{item.book} 作者:{item.value}</p>)
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    console.log(state);
    return {
        list:state.test.list
    }
}

export default connect(mapStateToProps)(Index);

那么到这里就已经可以初步使用dva了