import styles From './index.less'
const CountApp = ({count, dispatch}) => {
    return (
        <div classname={styles.normal}>
          <div className={styles.record}>Highest Record: {count.record}</div>
          <div className={styles.current}>{count.current}</div>
          <div className={styles.button}>
          <button onClick={() => { dispatch({type: 'count/add'}); }}>+</button>
        </div>
    )
}

Notice:

1. 可以看到有两个PRops传入，count和dispatch， count是当前组件连接的model中的一个状态。dispatch是用来触发一个action操作的。
2. dispatch({type:'count/add'}) 就是触发一个action操作。

Update state

reducer可以更新state。这样使我们的应用更加可控，这样所有数据更改都是可追踪的。reducer是一个纯函数，可以接收两个参数：state和action。然后返回一个新的state。

(state, action) => {newState}

我们来看一下例子~创建两个reducer, add和minus.
Notice:在count的model中add和minus不需要加namespace前缀，如果在这个model外面，我们需要在action前面加上这个namespace前缀。

app.model({
    namespace: 'count',
    state: {
        record: 0,
        current: 0
    },
    reducers: {
        add(state) {
            const newCurrent = state.current + 1
            return {
                ...state,
                record: newCurrent > state.record ? newCurrent : state.record,
                current: newCurrent
            }
        },
        minus(state) {
            return {...state, current: state.current -1 }
        }
    }
})

数据绑定

接着我们需要把count和dispatch传入到组件中，那么它是从哪来的呢？

在定义数据模型和组件后，我们需要将他们连接在一起，连接后组件可以使用这个数据模型中的data，然后数据模型Modal可以接收到组件中发起的action。

function mapStateToProps(state) {
    return {count: state.count}
}
const HomePage = connect(mapStateToProps)(CountApp);

定义路由

当接收到不同url的时候渲染对应的组件，这时就需要使用router。

app.router({histroy} => 
    <Router history={history}>
        <Route path="/" component={HomePage}>
    </Router>
)

Note:

1.  history默认是hashHistory

异步逻辑

在此之前，所有的擦欧洲哦都是按照同步操作的，现在我们处理异步逻辑操作。dva通过使用在model中使用effects去处理异步逻辑操作。这些操作都是基于redux-saga。并且通过es6的generator去处理。

app.model({
    namespace: 'count',
    effects: {
        *add(action, {call, put}) {
            yield call(delay, 1000)
            yield put({type: 'minus'})
        }
    }
})

Note:

1. *add() {} 相等于 add: function* () {}
2. call 和 put 是redux-saga中的命令， call用来处理异步逻辑， put用来dispatch action。除此之外还有一些其他的命令select， take， fork， cancel等。

Subscribe Keyboard Event

Subscription的概念来自dva 0.17版本。Subscription用来订阅数据源，例如路由的变化等。

app.model({
    namespace: 'count',
    subscription: {
        keyboardwatcher({dispatch}) {
            key(xx, ()=> {dispatch({type: add})})
        }
    }
})

关于dva的学习这么多就差不多可以进行开发啦~更多内容可以去github上看他们的官方文档~~