dva数据流方案使用

2018-09-14

dva是一个基于reduxredux-saga的数据流方案,同时内置了react-router。

技术功能

  1. 简化react中redux的繁琐配置
  2. 合理组织model
  3. dva-loading自动处理loding状态

使用步骤

安装dav-cli

npm install dva-cli -g

dva  new dva-quickstart

cd dva-quickstart

npm start

使用antd

安装antd babel-plugin-import 用来按需加载

npm install antd babel-plugin-import --save

编辑 .webpackrc,使 babel-plugin-import 插件生效。

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

概念(官网说明)

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch发起一个 action,如果是同步行为会直接通过 Reducers改变 State,如果是异步行为(副作用)会先触发 Effects然后流向 Reducers最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。

快速使用

在src/routes中新建文件Hello.js,在其中写入

import React from 'react';
import { Input } from 'antd';
import styles from './Hello.css'

export default function Hello() {
  return (
    <div className={styles.box}>
      <Input placeholder="Basic usage" />
      <p className={styles.text}>一个人</p>
    </div>
  )
}

这样我们就定义了ui组件,其中需要注意,当我们在routes中写好了我们的组件后,我们需要去src/router.js 下面定义一下我们的路由,然后启动项目访问相应的路径就能看到我们定义好的组件了。接下来我们定义model,在src/models创建hello.js这个model存放的就是hello.js这个组件的状态。

export default {
  namespace: 'hello',  
  state:{
    defaultValue:'HELLO CHANGJUN'
  } , 
  reducers: {
    'change'(state,{payload:value}){
      return {
        defaultValue: value
      }
    }
  },
}

其中要注意namespace代表着在全局store上的keystate表示我们的状态reducers就相当于redux当中的reducer,接受action同步state。这样我们就写好了我们的model,接下来我们要把她连接到我们的组件当中去,并写完我们的demo。回到的我们的组件当中写入

import React from 'react';
import { connect } from 'dva';
import { Input } from 'antd';
import styles from './Hello.css'


function Hello({ dispatch, hello }) {
  function changeInputValue(e){
    dispatch({
      type:'hello/change',
      payload:e.target.value
    });
    console.log(e.target.value)
  }
  return (
    <div className={styles.box}>
      <Input placeholder="Basic usage" onChange={changeInputValue} value={hello.defaultValue} />
      <p className={styles.text}>{hello.defaultValue}</p>
    </div>
  )
}

function mapStateToProps({hello}) {
  return {hello}
}

export default connect(mapStateToProps)(Hello)

其中connect是连接model和组件这个跟redux中的conect一样,利用一个函数将dispatch和状态传递到props中取,组件通过props即可拿到相应的状态和dispatch

使用问题

在定义好model时一定要记着去index.js去挂载一下。

app.model(require('./models/hello').default);

还有Effect和Subscription订阅这两个api有空的时候补充一下。