React Dva入门

create-react-app创建工程只能创建一个最基本的空程序。需要手动安装很多依赖包及代码操作。Dva将一切进行了简化,它是一个封装好很多模块的框架,并且拥有自己的脚手架。用Dva创建的工程,从目录结构起就非常清晰。

创建Dva项目

全局安装Dva脚手架

1
> npm install dva-cli -g

使用dva -v可以查看版本号

1
2
> dva -v
dva-cli version 0.10.1

create-react-app一样,使用dva在命令行创建app

1
dva new dva-app

其后进入工程文件并启动工程

1
2
cd dva-app
npm start

目录结构

除了index.js的入口文件,和router.js的初始路由,Dva工程的目录结构大致意义如下:

asserts:用于存放静态资源
components:用于存放公共组件,比如页面头尾导航条
routes:用于存放路由组件,可以通俗的理解成页面。与component的区别在于一般是非公共的并且会跟model里的数据模型联系起来
models:用于存放模型文件(个人认为model才是react-redux体系里最重要的部分),我们之前说的state以及reducer都会写在里面,同时,通过connect跟routes里面的组件进行绑定。routes中的组件通过connect拿到model中的数据,model也能通过connect接收到组件中dispatch的action
services:用于存放跟后台交互的服务文件,一般都需要调用后台的接口
utils:用于存放工具类库

整体的流程大致(数据流向)是:

从index入口进入 => 通过url匹配routes里的组件(顺便看看components里有没有啥公共组件需要加载) => routes里的组件dispatch action => model通过action改变state(中途可能会通过services跟后台交互) => 通过connect重新渲染routes中的组件

Dva基本流程

Dva实践

使用Dva完成路由切换并且做个表格

入口文件

首先,在入口文件index.js中,可以看到已经为我们留了model模型和router路由的位置。在开发中,所有的model模型文件都需要在这里注册,这样才能用connect跟组件联系起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

先不管Model,Router告诉我们引用了router.js,打开看一眼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
</Switch>
</Router>
);
}

export default RouterConfig;

只有一个,通俗易懂,在路径为/时匹配到IndexPage。(不用我们自己安装Router自己建立router.js自己配置是不是很方便~)注意这里加了exact,表示精确匹配,如果不加则/aaa/bbb/whatever都会匹配到IndexPage,精确匹配的话只有输入/的时候才会匹配。

IndexPage里能看到欢迎信息,那个小丑图片和提示文字。

路由切换

(1)安装Antd!虽然Dva很贴心的封装了很多工具包但是并没有封装样式库,所以Antd还是需要自己手动安装

1
2
yarn add babel-plugin-import
yarn add antd

并编辑.webpackrc文件

1
2
3
4
5
6
7
8
9
{
"extraBabelPlugins": [[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]]
}

(2)新增组件

在routes里新建aaa.jsbbb.js两个组件。内容随便写点,只是为了切换使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// aaa.js
import React, { Component } from 'react'
import { connect } from 'dva'

class AAA extends Component { //BBB同理
render() {
return (
<div>
<h1>AAA</h1>
</div>
)
}
}

AAA.propsTypes = {}
export default connect()(AAA)

(3)定义导航栏

然后,在components里建立两个公共组件header.jslayout.js

header.js用作页面上方的导航栏,理想效果如下,通过点击不同导航切换地址栏url。

header.js需要引入antdMenu模块,以及dva封装好的LinkLink的作用即匹配相应的路径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from 'react'
import { Menu } from 'antd';
import { Link } from 'dva/router'

class Header extends Component {
render() {
return (
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['1']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">
<Link to="/">Index</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/aaa">AAA</Link>
</Menu.Item>
<Menu.Item key="3">
<Link to="/bbb">BBB</Link>
</Menu.Item>
</Menu>
)
}
}

export default Header;

(4)定义布局

layout.js用来当整体页面布局,我们想把页面分成两部分,上面放导航条下面放子内容。头部需要引入刚刚的header组件,然后以<Header />的方式插入到节点中。props是该组件的属性,用于传递数据,每个组件都有自己的propsprops.children表示该组件的所有子节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// layout.js
import React, { Component } from 'react'
import { connect } from 'dva';
import Header from '../components/header'

class Layout extends Component {
render() {
const { children } = this.props
return (
<div>
<Header />
<div style={{ background: '#fff', padding: 24 }}>{children}</div>
</div>
)
}
}

export default Layout;

(5)连接路由

此时还差最后一步,就是把路由跟刚刚的这些组件联系起来。我们回到router.js,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// router.js
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import Layout from './components/layout'
import IndexPage from './routes/IndexPage';
import AAA from './routes/aaa';
import BBB from './routes/bbb';

function RouterConfig({ history }) {
return (
<Router history={history}>
<Layout>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/aaa" exact component={AAA} />
<Route path="/bbb" exact component={BBB} />
</Switch>
</Layout>
</Router>
);
}

export default RouterConfig;

return中的子节点,就是会放到layout.jsprops.children中的内容。

以上操作的流程是,在header.js中,我们通过点击不同导航栏,更换地址栏的url;接下来在router.js中,通过匹配地址栏的url,选择加载的子组件呈现到页面上。

路由到此结束,接下来加上列表。

列表操作

(1)创建routes页面组件

routes/IndexPage.js页面组件里

1
2
3
4
5
6
<div>
<Button type="primary" onClick={this.changeData}>修改数据</Button>
<div>
<Table columns={columns} dataSource={data}/>
</div>
</div>

Table标签有两个属性,columns是表头,dataSource是数据,均绑定到state。只是这一次,stateaction都不是直接写在页面组件下,而是定义到对应的模型文件中。

(2)创建models模型

新建models/index-page.js作为模型文件。可以参考项目自带的example.js,里面已经给出了stateeffectsreducers的地方。

namespace是该模型文件的命名空间,也是在全局state上的属性,在routes组件中,我们可以用this.props.某命名空间获取state(根节点)中某命名空间的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export default {
namespace: 'indexPage',
state: {
columns: [{
title: '城市',
dataIndex: 'city',
}, {
title: '省份',
dataIndex: 'province',
}],
data: [{
"key": "1",
"city": "杭州",
"province": "浙江"
}, {
"key": "2",
"city": "广州",
"province": "广东"
}]
},

subscriptions: {

},

effects: {

},

reducers: {

},
};

(3)通过connect关联数据

回到routes/IndexPage.js页面组件,如果我们在routes中想要使用model里面的数据,需要通过connect工具来传递,其基本用法是connect(从model中获取数据)(绑定到routes组件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import { connect } from 'dva';
import { Button, Table, Row } from 'antd';

class IndexPage extends React.Component {
changeData = () => {
console.log("Change Data");
};

render() {
const { columns, data } = this.props.indexPage; //获取indexPage中的state
return (
<div>
<Button type="primary" onClick={this.changeData}>修改数据</Button>
<div>
<Table columns={columns} dataSource={data}/>
</div>
</div>
);
}
}

export default connect(({ indexPage }) => ({
indexPage,
}))(IndexPage);

(4)更新index.js中的app.model

1
2
// Model
app.model(require('./models/index-page').default);

这样,models/index-page.jsstate数据就被绑定到routes/IndexPage.jsTable节点上,列表被赋予了两行值。

services获取数据

(1)创建services

假设有个json数据是这样的,我们想将其当做一行添加到上面表格的列表里。

services中我们同后台进行交互,新建services/city.js文件

1
2
3
4
5
6
//services/city.js
import request from '../utils/request';

export function getCity() {
return request('http://www.yezhou.cc/api/city.php');
}

utils/request.js里面已经贴心的自带了request方法用于请求url,直接拿来使用即可。这样,在我们调用getCity()方法时,就会请求数据。

友情提示,以往我们一直习惯直接在model里调用getCity(),然后用setState改变state的值,但这是不符合Dva的规则的,Dva规定我们必须通过触发action才可以改变state,也就是下一步。

(2)触发action

对于这个列表,我们希望点击按钮添加一行。根据前述我们知道,改变state的值需要dispatch(action),再调用reducer改变state,进而重新渲染,这是Dva规定的数据流传输方式。

这里的action有两种走向,对于同步行为(比如我就改变个按钮颜色),可以直接调用model中的reducer。而对于异步行为(比如从服务器请求数据),需要先触发effects然后调用reducer

下面我们在routes/IndexPage.js里,通过onClick={this.changeData}按钮事件,触发一个action给模型文件。

1
2
3
4
5
6
7
8
9
//点击按钮触发
changeData = () => {
console.log("Change Data");
const { dispatch } = this.props;
dispatch({
type: 'indexPage/addCity',
payload: {},
});
};

这表示我们要调用models/index-page.jsaddCity方法。

models/index-page.js里,我们需要在effects中定义好这个方法。effects属性的语法可以参考Redux-saga 中文文档,它可以获取全局state,也可以触发actioneffects内部使用yield关键字标识每一步的操作,call表示调用异步函数,put表示dispatch(action)

1
2
3
4
5
6
7
8
9
10
11
12
13
import { getCity } from '../services/city'

effects: {
*addCity({ payload }, { call, put }) { // eslint-disable-line
const myCity = yield call(getCity, {});
yield put({
type: 'ADD_CITY',
payload: {
myCity: myCity.data
},
});
},
},

这表明,我们先读取service中的getCity()方法,将它放到payload里,然后调用reducer里面名为ADD_CITYaction,告诉它要改变state

(3)调用reducer

我们说过,reducer是纯函数,当输入相同时输出也必然相同,其输入参数是当前的state和收到的action,返回一个新的state...三点运算符的作用是把数组打开进行操作,我们把payload中的信息加在state的原有data之后。

1
2
3
4
5
6
reducers: {
ADD_CITY(state, action) {
return { ...state,
data: state.data.concat(action.payload.myCity) };
},
},

点击一下按钮,是不是已经添加成功了~

原生redux库需要手动去创建监听重新渲染页面才能看到更新效果,而在Dva中,由于使用了connect,会在内部自动更新,并不用手动刷新。

这样,就完成了一个简单的页面切换和修改state的例子。

React-Dva入门

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :