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小玩具就完成了