Dva项目搭建

Dva可以看作React和Redux的结合，可以通过搭建Dva项目实现React和Redux的功能。搭建流程为：

1. 创建dva项目

• 1. 全局安装 dva-cli 的脚手架
     npm install dva-cli -g
• 2. 利用 dva-cli的脚手架新建一个dva项目
     dva new <项目文件名>
     以上步骤就创建了一个dva项目，可以运行npm run start 启动项目。

2.加入Antd

• 1. 安装 antd 以及 babel-plugin-import,后者是为了按需加载antd的组件以及相应的样式，优化性能。
     npm install antd babel-plugin-import --save
• 2. 为了使babel-plugin-import插件生效,需要在.webpackrc的文件中对其进行配置。.webpackrc文件使roadhog的配置文件，roadhog可以看作是webpack的替代功能。加入以下配置后，该插件会按需加载组件以及样式。

 "extraBabelPlugins": [
     ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ]

3. 定义路由

• 1. 在routes文件夹中新建一个页面文件，如SecondPage.js文件，其中写入页面代码。如下：

import React from 'react'
import { connect } from 'dva'
class SecondPage extends React.Component {
  render () {
    return <h2>List of Products</h2>
  }
}
export default connect()(SecondPage)

• 2. 在router.js中加入该页面的路由。

import SecondPage from './routes/SecondPage'
…
<Route path='/second' exact component={SecondPage} />
…

4.共享组件

共享组件放到components文件夹中。

5. 定义Model

• 1. 在model文件夹中新建一个model文件，加入定义了两个model文件，secondState.js和thirdState.js,分别为：

export default {
  // key值
  namespace: 'secondState',
  // 初始状态
  state: {
    num: 1
  },
  // 更新状态逻辑
  reducers: {
    setState (state, { payload }) {
      return { ...state, ...payload }
    }
  }
}

export default {
  // key值
  namespace: 'thirdState',
  // 初始状态
  state: {
  },
  // 更新状态逻辑
  reducers: {
    setState (state, { payload }) {
      return { ...state, ...payload }
    }
  }
}

• 2. 在index.js中载入上述文件

app.model(require('./models/secondState').default)
app.model(require('./models/thirdState').default)

6. 将model和component连接起来

• 1. 假如将SecondPage更改为一个点击按钮增加1的功能，即render中返回

<Button onClick={this.handleAdd}>增加</Button>
<p>{`当前值${num}`}</p>

• 2. connect写法

export default connect(function (state) {
    return {
        num: state.secondState.num
    }
}, (dispatch)=> {
    return {
        addNum: (newNum) => {dispatch({type: 'secondState/setState', payload: {num:newNum}})}
    }
})(SecondPage)

connect的参数为：
connect( 输入逻辑，输出逻辑 )( UIComponents )
输入逻辑中的参数上述创建的所有model,返回该组件需要的数据即可，该组件只需要num，所以仅返回了num，返回的对象可以通过组件的props属性访问到。上述参数state为：

image.png
包括路由相关对象，以及我们上面 model中创建的secondState和thirdState对象。
输出逻辑为action具体的行为逻辑。
UIComponents为作用的组件。

• 3. 完整的代码：

import React from 'react'
import { connect } from 'dva'
import { Button } from 'antd'

class SecondPage extends React.Component {
  componentDidMount () {
      console.log(this.props,"11")
  }

  handleAdd = () => {
      console.log(this.props.num + 1)
    this.props.addNum(this.props.num + 1)
  }

  render () {
    console.log(this.props)
    const { num } = this.props
    
    return <>
      <Button onClick={this.handleAdd}>增加</Button>
      <p>{`当前值${num}`}</p>
    </>
  }
}

export default connect(function (state) {
    return {
        num: state.secondState.num
    }
}, (dispatch)=> {
    return {
        addNum: (newNum) => {dispatch({type: 'secondState/setState', payload: {num:newNum}})}
    }
})(SecondPage)