react-dva学习 --- 用实例来入门

一、为何学习react-dva

• 以前的react的项目，webpack、redux、redux-saga都是本身写，用过的人都明白，首先redux真的是很麻烦
• 来回几个action,action-type,reducer来回切换，异步插件react-thunk虽然简单，但一些复杂场景仍是很差用，并且给action带来了反作用，后来了解到react-dva，确实写起来要效率高不少

二、demo项目简介

点击+号按钮，当即+1,但过一秒以后（异步操做），就减一

三、如何搭建dva项目

3.1 安装dva-cli

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1
复制代码

3.2 建立新应用

$ dva new counter

// 建立完毕就进入到counter项目，并启动服务器
$ cd counter
$ npm start
复制代码

四、先完成项目样式的布局

4.1 改写src目录下的index.js的路由

// index.js
import Counter from './components/Counter'

app.router(({ history }) => {
    return (
        <Router history={history}>
            <Switch>
                <Route path='/' exact component={Counter} />
            </Switch>
        </Router>
    )
});

复制代码

接着初始化index.js里的reducer里的数据

app.model({
    namespace: 'count',
    state: {
        current: 0
    },
    reducers: {
        add(state, action) {
            let newCurrent = state.current + 1
            return { current: newCurrent }
        }
    }
})
// namespace表明命名空间，也就是这个reducer的名字叫count
// state表明初始化数据是一个对象，对象里的属性是current：0
// reducer就跟咱们平时用的reducer同样，add表明action.type的类型
// add函数里面的参数有两个，第一个state就是上面咱们定义的state,即{current: 0}
// action 表明触发的行为类型
复制代码

而后进入到components目录里，创建Counter.js文件

import React, { Component } from 'react'
import { connect } from 'dva'
import styles from '../index.less'
class Counter extends Component {
    render() {
        return (
            <div className={styles.container}>
                <div className={styles.current}>
                    {this.props.current}
                </div>
                <div className={styles.button}>
                    <button onClick={() => this.props.dispatch({ type: 'count/add' })}>+</button>
                </div>
            </div>
        )
    }
}
export default connect(
    state => state.count
)(Counter)
// 这里connect函数跟就是react-redux里面的connect函数，目的是用来链接react和redux的
// styles是给咱们的css添加命名空间的，用法直接照搬就好了
复制代码

index.less文件以下

.container{
  width: 200px;
  padding: 20px;
  border:1px solid #ccc;
  box-shadow: 0 0 10px #CCC;
  margin: 50px auto;

  .current{
    padding: 50px 0;
    text-align: center;
    font-size: 20px;
  }

  .button{
    text-align: center;
    button{
      width: 100px;
      height: 30px;
      font-size: 18px;
    }
  }
}
复制代码

这样，咱们第一步，样式就作出来了，还能够点击加号，有+1的效果了

五、完成项目的异步操做

异步操做只须要在app.model里面增长effects属性就能够了。 app.modal改造以下

let delay = ms => new Promise((resolve, reject) => {
    setTimeout(() => resolve('ok'), ms)
})
app.model({
    namespace: 'count',
    state: {
        current: 0
    },
    reducers: {
        add(state, action) {
            let newCurrent = state.current + 1
            return { current: newCurrent }
        },
        minus(state, action) {
            let newCurrent = state.current - 1
            return { current: newCurrent }
        }
    },
    // 反作用
    effects: {
        // call调用一个方法，put派发一个action
        *add(action, { call, put }) {
            yield call(delay, 1000)
            yield put({ type: 'minus' })
        }
    }
});

复制代码

这里在effects里面增长了一个add方法，这个add方法里面调用了reducer里的minus方法，而且延迟了1秒

到这里，一个简单的dva小玩具就完成了