从零构建React项目（四）： 使用Dva

Dva 是一个基于 redux 和 redux-saga 的数据流方案, 所以相对于 redux 来说使用起来就更加的方便和简单，或者说，dva 可以算是目前较为主流的一项数据流管理的技术了。

1. 引入Dva

yarn add dva

2. 修改入口文件

// src/index.js
import dva from 'dva'

const app = dva({})

app.model(require('./models/exampleModel')).default)；
app.router(require('/router').default);
app.start('#root')

3.编写model

1. 在src目录下新建models文件夹，所有的model文件都放在该文件夹下
2. 新建一个model示例，在models文件夹下新建exampleModel.js

export default {
    namespace: 'example',
    state: {
        count: 0,
    },
    reducers: {
        save(state, { payload: { count } }) {
            return { ...state, count }
        }
    },
    effects: {
        *increment(action, { put, select }) {
            const count = yield select((state) => state.example.count)
            const newCount = count + 1
            yield put({ type: 'save', payload: { count: newCount } })
        },
        *decrement(action, { put, select }) {
            const count = yield select((state) => state.example.count)
            const newCount = count - 1
            yield put({ type: 'save', payload: { count: newCount } })
        },
    },
}

3. 在src目录下新建features目录并新建IndexPage页面

import React from 'react'
import { connect } from 'dva';

interface P {
    count: number,
    increment?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void),
    decrement?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void),
}

class IndexPage extends React.Component<P, {}> {

    render() {
        const { count, increment, decrement } = this.props
        return (
            <div>
                <div>当前数量：{count}</div>
                <div>
                    <button onClick={increment}>自增1</button>
                    <button onClick={decrement}>自减1</button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    count: state.example.count,
})

const mapDispatchToProps = (dispatch) => ({
    increment() {
        dispatch({ type: 'example/increment' })
    },
    decrement() {
        dispatch({ type: 'example/decrement' })
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(IndexPage)

4. 添加router配置
5. 在src目录下新建router.tsx

import React from 'react'
import { Router, Route } from 'dva/router';
import IndexPage from './features/IndexPage/IndexPage'

function RouterConfig({ history }) {
  return (
    <Router history={history}>
        <Route path="/" component={IndexPage} />
    </Router>
  )
}
export default RouterConfig

6. 测试示例 运行测试环境，在浏览器访问即可查看具有自增和自减功能的页面