react学习之dva

快速上手

1. 全局安装
   npm install dva-cli -g
2. 构建dva项目
   dva new dva-demo
3. 运行
   npm start

引入antd

1. 安装
   npm install antd babel-plugin-import --save
2. 引入样式
   入口文件引入样式文件import antd/dist/antd.css

路由

路由组件在routes文件夹，路由导航在route.js文件中。
在routes中定义about.js文件。
在router.js中引入，地址栏输入about路由即可访问该组件。

路由模式切换为history模式

1. 安装npm install --save history
2. 入口index.js文件中修改dva配置

import { createBrowserHistory as createHistory } from 'history'
const app = dva({
  history: createHistory(),
});

然后即可使用history访问。

路由跳转的方式

1. 使用 进行跳转
2. 使用this.props.router.push()跳转
3. 使用import { withRouter } from 'dva/router'

import React, { PureComponent } from 'react';
import { withRouter } from 'dva/router'
class Child extends PureComponent {
  navToIndex(){
    console.log(this.props);
    this.props.history.push('/')
  }
  render() {
    return (
      <div>
        <button onClick={this.navToIndex.bind(this)}>首页</button>
      </div>
    );
  }
}
export default withRouter(Child);

Model

通过connect进行连接
读取值 并展示

import React, { PureComponent } from 'react'
import { connect } from 'dva'
class IndexPage extends PureComponent {
  render() {
    return (
      <div>
        首页{this.props.msg}
        <h3>{this.props.name}</h3>
      </div>
    )
  }
}
const mapStateToProps = state => {
  console.log(state);
  return {
    msg: '申伟建',
    name: state.indexTest.name
  }
}
export default connect(mapStateToProps)(IndexPage)

使用reducers进行修改操作
组件文件

  btnSetName = ()=>{
    console.log(this.props);
    this.props.dispatch({
      type: 'indexTest/setName',
      data: {
        name:'swn'
      }
    })
  }
  render() {
    return (
      <div>
        首页{this.props.msg}
        <h3>{this.props.name}</h3>
        <button onClick={this.btnSetName}>改名字</button>
      </div>
    )
  }

Model文件

export default {
  namespace: 'indexTest',
  state: {
    name: 'swj'
  },
  reducers:{
    setName(state,payLoad){
      let _state = JSON.parse(JSON.stringify(state))
      _state.name = payLoad.data.name
      return _state
    }
  }
}

异步操作effects

使用call异步请求接口，返回的数据进行put，通过reducers修改state中的数据。

    *testCnode({ payLoad },{ put,call }){
      let res = yield call(query)
      if(res.data){
        console.log(res.data.data);
        yield put({
          type: 'setList',
          data: {
            list:res.data.data
          }
        })
      }
    }

subscriptions

  subscriptions:{
    historySub({dispath,history}){
      history.listen(pathName=>{
        console.log(pathName);
      })
    }
  }