DVA 快速入门

DVA 概念图

图片引自DvaJS官网

DVA 项目搭建

1.导入dva

import dva from 'dva';

2.创建app

const app = dva();

3.创建model

app.model({
    namespace:"componentA",
    state:{},
    reducers:{},
    effects:{},
    sucscriptions:{}
});
app.model({
    namespace:"componentB",
    state:{},
    reducers:{},
    effects:{},
    sucscriptions:{}
});

4.创建component

import React from 'react';
class ComponentA extends React.Component{
    render(){
        return (
            <div>
                This is ComponentA
            </div>
        );
    }
}
class ComponentB extends React.Component{
    render(){
        return (
            <div>
                This is a ComponentB
            </div>
        );
    }
}

5.链接component

import {connect} from 'dva'; 
const mapStateToProps = state => state.componetA
const ConnectComponentA = connect(mapStateToProps)(ComponentA);
const ConnectComponentB = connect(state => state.componentB)(ComponentB);
export {
    ConnectComponentA,
    ConnectComponentB
}

6.配置路由

import {Router, Switch, Route, Redirect, Link} from 'dva/router';
app.router(RouterApi => {
    const { history } = RouterApi;
    return (
        <Router>
            <>
                <div>
                    <Link to='/componetA'>ComponentA</Link>
                    <Link to='/componentB'>ComponentB</Link>
                </div>

                <Switch>
                    <Route path='/componentA' component={ConnectComponentA} />
                    <Route path='/componentB' component={ConnectComponentB} />
                    <Redirect to='/componentA' />
                </Switch>
            </>
        </Router>
    );
});

7.开始渲染

app.start('#root');

参考链接
DvaJS