概述
本篇文章使用create-react-app作为脚手架，结合react技术栈（react + redux + react-router），构建一个简单的单页面应用demo。文章会一步步地讲解如何构建这么一个单页应用。文章的最后也会给出相应的demo地址。
本文主要是对SPA搭建的实践过程讲解，在对react、redux、react-router有了初步了解后，来运用这些技术构建一个简单的单页应用。这个应用包括了侧边导航栏与主体内容区域。下面简单罗列了将会用到的一些框架与工具。
- create-react-app：脚手架
- react：负责页面组件构建
- react-router：负责单页应用路由部分的控制
- redux：负责管理整个应用的数据流
- react-redux：将react与redux这两部分相结合
- redux-thunk：redux的一个中间件。可以使action creator返回一个
function（而不仅仅是object），并且使得dispatch方法可以接收一个function作为参数，通过这种改造使得action支持异步（或延迟）操作 - redux-actions：针对redux的一个FSA工具箱，可以相应简化与标准化action与reducer部分
好了，话不多说，一起来构建你的单页应用吧。
使用create-react-app脚手架
create-react-app是Facebook官方出品的脚手架。有了它，你只需要一行指令即可跳过webpack繁琐的配置、npm繁多的引入等过程，迅速构建react项目。
首先安装create-react-app
npm i -g create-react-app
安装完成后，就可以使用create-react-app指令快速创建一个基于webpack的react应用程序
cd $your_dir
create-react-app react-redux-demo
这时你可以进入react-redux-demo这个目录，运行npm start既可启动该应用。
打开访问localhost:3000看到下方对应的页面，就说明项目基础框架创建完毕了。
创建React组件
修改目录结构
下面在我们的react-redux-demo项目，查看一下相应的目录结构
|--public
|--index.html
|-- ……
|--src
|--App.js
|--index.js
|-- ……
|--node_modules
其中public中存放的内容不会被webpack编译，所以可以放一些静态页面或图片；src中存放的内容才会被webpack打包编译，我们主要工作的目录就是在src下。
了解react的同学肯定知道，在react中我们通过构建各种react component来实现一个新的世界。在我们的项目里，会基于此，将组件分为通用组件部分与页面组件部分。通用组件也就是我们普遍意义上的组件，一些大型项目会维护一个自己的组件库，其中的组件会被整个项目共享；页面组件实际上就是我们项目中所呈现出来的各个页面。因此，我们的目录会变成这样
|--public
|--index.html
|-- ……
|--src
|--page
|--welcome.js
|--goods.js
|--component
|--nav
|--index.js
|--index.css
|--App.js
|--index.js
|-- ……
|--node_modules
在src目录下新建了page和component两个目录分别用于存放页面组件和通用组件。页面组件包括welcome.js和商品列表页good.js，通用组件包括了一个导航栏nav。
两种组件形式
编写页面或组件，类似于静态页的开发。推荐的组件写法有两种：
1）纯函数形式：该类组件为无状态组件。由于使用函数来定义，因此不能访问this对象，同时也没有生命周期方法，只能访问props。这类组件主要是一些纯展示类的小组件，通过将这些小组件进行组合构成更为复杂的组件。例如：
const Title = props => (
<h1>
{props.title} - {props.subtitle}
</h1>
)
2）es6形式的组件：该类组件一般为复杂的或有状态组件。使用es6的class语法进行创建。需要注意的是，在页面/组件中使用this注意其指向，必要时需要绑定。绑定方法可以使用bind函数或箭头函数。创建方式如下：
class Title extends Component {
constructor(props) {
super(props);
this.state = {
shown: true
};
}
render() {
let style = {
display: this.state.shown ? 'block' : none
};
return (
<h1 style={style}>
{props.title} - {props.subtitle}
</h1>
);
}
}
下面是这两种组件之间的对比：
| Presentational Components | Container Components | |
|---|---|---|
| Purpose | How things look (markup, styles) | How things work (data fetching, state updates) |
| Aware of Redux | No | Yes |
| To read data | Read data from props | Subscribe to Redux state |
| To change data | Invoke callbacks from props | Dispatch Redux actions |
| Are written | By hand | Usually generated by React Redux |
鉴于上面的分析，我们可以将导航栏nav编写为无状态组件，而page中的部分使用有状态的组件。
导航栏组件nav
// component/nav/index.css
.nav {
margin: 30px;
padding: 0;
}
.nav li {
border-left: 5px solid sandybrown;
margin: 15px 0;
padding: 6px 0;
color: #333;
list-style: none;
background: #bbb;
}
// component/nav/index.js
import React from 'react';
import './index.css';
const Nav = props => (
<ul className="nav">
{
props.list.map((ele, idx) => (
<li key={idx}>{ele.text}</li>
))
}
</ul>
);
export default Nav;
修改后的App.js与App.css
// App.css
.App {
text-align: center;
}
.App::after {
clear: both;
}
.nav_bar {
float: left;
width: 300px;
}
.conent {
margin-left: 300px;
padding: 30px;
}
// App.js
import React, { Component } from 'react';
import Nav from './component/nav';
import Welcome from './page/welcome';
import Goods from './page/goods';
import './App.css';
const LIST = [{
text: 'welcome',
url: '/welcome'
}, {
text: 'goods',
url: '/goods'
}];
const GOODS = [{
name: 'iPhone 7',
price: '6,888',
amount: 37
}, {
name: 'iPad',
price: '3,488',
amount: 82
}, {
name: 'MacBook Pro',
price: '11,888',
amount: 15
}];
class App extends Component {
render() {
return (
<div className="App">
<div className="nav_bar">
<Nav list={LIST} />
</div>
<div className="conent">
<Welcome />
<Goods list={GOODS} />
</div>
</div>
);
}
}
export default App;
welcome页面
// page/welcome.js
import React from 'react';
const Welcome = props => (
<h1>Welcome!</h1>
);
export default Welcome;
goods页面
// page/goods.js
import React, { Component } from 'react';
class Goods extends Component {
render() {
return (
<ul className="goods">
{
this.props.list.map((ele, idx) => (
<li key={idx} style={{marginBottom: 20, listStyle: 'none'}}>
<span>{ele.name}</span> |
<span>￥ {ele.price}</span> |
<span>剩余 {ele.amount} 件</span>
</li>
))
}
</ul>
);
}
}
export default Goods;
现在我们的页面是这样的
使用redux来管理数据流
redux是flux架构的一种实现。图中展示了，在react+redux框架下，一个点击事件是如何进行交互的。
然而redux并不是完全依附于react的框架，实际上redux是可以和任何UI层框架相结合的。因此，为了更好得结合redux与react，对redux-flow中的store有一个更好的全局性管理，我们还需要使用react-redux。
npm i --save redux
npm i --save react-redux
同时，为了更好地创建action和reducer，我们还会在项目中引入redux-actions：一个针对redux的一个FSA工具箱，可以相应简化与标准化action与reducer部分。当然，这是可选的
npm i --save redux-actions
下面我们会以goods页面为例，实现以下场景：goods页面组件渲染完成后，发送请求，获取商品列表。其中获取数据的方法会使用mock数据。
为了实现这些功能，我们需要进一步调整目录结构
|--public
|--index.html
|-- ……
|--src
|--page
|--welcome.js
|--goods.js
|--component
|--nav
|--index.js
|--index.css
|--action
|--goods.js
|--reducer
|--goods.js
|--index.js
|--App.js
|--index.js
|-- ……
|--node_modules
首先，创建action
首先，我们要创建对应的action。
action是一个object类型，对于action的结构有Flux有相关的标准化建议FSA
一个action必须要包含type属性，同时它还有三个可选属性error、payload和meta。
- type属性相当于是action的标识，通过它可以区分不同的action，其类型只能是字符串常量或
Symbol。 - payload属性是可选的，可以使任何类型。payload可以用来装载数据；在error为true的时候，payload一般是用来装载错误信息。
- error属性是可选的，一般当出现错误时其值为true；如果是其他值，不被理解为出现错误。
- meta属性可以使任何类型，它一般会包括一些不适合在payload中放置的数据。
我们可以创建一个获取goods信息的action：
// action/goods.js
const getGoods = goods => {
return {
type: 'GET_GOODS',
payload: goods
};
}
这样，我们就可以得到GET_GOODS这个action。
在项目中，使用redux-actions对actions进行创建与管理：
createAction(type, payloadCreator = Identity, ?metaCreator)
createAction相当于对action创建器的一个包装，会返回一个FSA，使用这个返回的FSA可以创建具体的action。
payloadCreator是一个function，处理并返回需要的payload；如果空缺，会使用默认方法。如果传入一个Error对象则会自动将action的error属性设为true：
example = createAction('EXAMLE', data => data);
// 和下面的使用效果一样
example = createAction('EXAMLE');
因此上面的方式可以改写为：
// action/goods.js
import {createAction} from 'redux-actions';
export const getGoods = createAction('GET_GOODS');
* 此外，还可以使用createActions同时创建多个action creators。
其次，创建state的处理方法——reducer
针对不同的action，会有不同的reducer对应进行state处理，它们通过type的值相互对应。
reducer是一个处理state的方法（function），该方法接收两个参数，当前状态state和对应的action。根据state与action，reducer会进行处理并返回一个新的state（同时也是一个新的object，而不去修改原state）。可以通过简单的switch操作来实现：
// reducer/goods.js
const goods = (state, action) => {
switch (action.type) {
case 'GET_GOODS':
return {
...state,
data: action.payload
};
// 其他action处理……
}
}
对应createAction，redux-actions也有相应的reducer方式：
handleAction(type, reducer | reducerMap = Identity, defaultState)
type可以是字符串，也可以是createAction返回的action创建器：
handleAction('GET_GOODS', {
next(state, action) {...},
throw(state, action) {...}
}, defaultState);
//或者可以是
handleAction(getGoods, {
next(state, action) {...},
throw(state, action) {...}
}, defaultState);
此外，有时候一些操作的一系列action可以在语义和业务逻辑上是有一定联系的，我们希望将他们放在一起便于维护。可以通过handleActions方法将多个相关的reducer写在一起，以便于后期维护：
handleActions(reducerMap, defaultState)
因此，我们使用redux-actions来改写我们之前写的reducer
// reducer/goods.js
import {handleActions} from 'redux-actions';
export const goods = handleActions({
GET_GOODS: (state, action) => ({
...state,
data: action.payload
})
}, {
data: []
});
然后，对reducer进行合并
因为在redux中会统一管理一个store，因此，需要将不用的reducer所处理的state进行合并。
redux为我们提供了combineReducers方法。当业务逻辑过多时，我们可以将多个reducer进行组合，生成一个统一的reducer。虽然现在我们只有一个reducer，但是为了拓展性和示范性，在这里还是创建了一个reducer/index.js文件来进行reducer的合并，生成一个rootReducer。
// reducer/index.js
import {combineReducers} from 'redux';
import {goods} from './goods';
export const rootReducer = combineReducers({
goods
});
之后，将页面组件与数据流相结合
上面的部分已经将redux中的action与reducer创建完毕了，然而，现在的数据流和我们的组件仍然是处于分离状态的，我们需要让全局的state，即store，的变化能够驱动页面组件的变化，才能完成redux-flow中的最后一环。这就需要将store中的各部分state映射到组件的props上。
解决这个问题就要用到我们之前提到的react-redux工具了。
首先，我们需要基于rootReducer创建一个全局的store。在src目录下新建一个store.js文件，调用redux的createStore方法：
// store.js
import {createStore} from 'redux';
import {rootReducer} from './reducer';
export const store = createStore(rootReducer);
然后，我们需要让所有的组件都能访问到store。最简单的方式就是使用react-redux
提供的Provider对整个应用进行包装。这样就可以使所有的子页面、子组件能访问到store。因此需要改写index.js：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import {store} from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
最后，才是进行组件与状态的连接。将store中需要映射的部分connect到我们的组件上。使用其connect方法可以做到这一点：
connect(mapStateToProps)(component)；
redux中存在一个全局的store，其中存储了整个应用的状态，对其进行统一管理。connect可以将这个状态中的数据连接到页面组件上。其中，mapStateToProps是store中状态到该组件属性的一个映射方式，component是需要连接的页面组件。通过connect方法，一旦store发生变化，组件也就会相应更新。
我们需要修改原先page/goods.js
import React, { Component } from 'react';
import {connect} from 'react-redux';
class Goods extends Component {
render() {
return (
<ul className="goods">
{
this.props.list.map((ele, idx) => (
<li key={idx} style={{marginBottom: 20, listStyle: 'none'}}>
<span>{ele.name}</span> |
<span>￥ {ele.price}</span> |
<span>剩余 {ele.amount} 件</span>
</li>
))
}
</ul>
);
}
}
const mapStateToProps = (state, ownProps) => ({
goods: state.goods.data
});
// -export default Goods;
export default connect(mapStateToProps)(Goods);
此外，也可以为组件中相应的方法映射对应的action的触发：
const mapDispatchToProps = dispatch => ({
onShownClick: () => dispatch($yourAction)
});
最后，在组件渲染完成后触发整个flow
如果产生了一个需要状态更新的交互，可以通过在组件中相应部分触发action来实现状态更新-->组件更新。触发方式：
dispatch($your_action)
connect后的组件，其props里会有一个dispatch的属性，就是个dispatch方法：
let dispatch = this.props.dispatch;
因此，最终的page/goods.js组件如下：
import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from '../action/goods';
const GOODS = [{
name: 'iPhone 7',
price: '6,888',
amount: 37
}, {
name: 'iPad',
price: '3,488',
amount: 82
}, {
name: 'MacBook Pro',
price: '11,888',
amount: 15
}];
class Goods extends Component {
componentDidMount() {
let dispatch = this.props.dispatch;
dispatch(actions.getGoods(GOODS));
}
render() {
return (
<ul className="goods">
{
this.props.goods.map((ele, idx) => (
<li key={idx} style={{marginBottom: 20, listStyle: 'none'}}>
<span>{ele.name}</span> |
<span>￥ {ele.price}</span> |
<span>剩余 {ele.amount} 件</span>
</li>
))
}
</ul>
);
}
}
const mapStateToProps = (state, ownProps) => ({
goods: state.goods.data
});
export default connect(mapStateToProps)(Goods);
注意到，组件中数据不再是由App.js中写入的了，而是经过了完整的redux-flow的过程获取并渲染的。注意同时修改App.js
import React, { Component } from 'react';
import Nav from './component/nav';
import Welcome from './page/welcome';
import Goods from './page/goods';
import './App.css';
const LIST = [{
text: 'welcome',
url: '/'
}, {
text: 'goods',
url: '/goods'
}];
class App extends Component {
render() {
return (
<div className="App">
<div className="nav_bar">
<Nav list={LIST} />
</div>
<div className="conent">
<Welcome />
<Goods />
</div>
</div>
);
}
}
export default App;
现在访问页面，虽然效果和之前一致，但是其内部构造和原理已经大不相同了。
最后一部分：添加路由系统
单页应用中的重要部分，就是路由系统。由于不同普通的页面跳转刷新，因此单页应用会有一套自己的路由系统需要维护。
我们当然可以手写一个路由系统，但是，为了快速有效地创建于管理我们的应用，我们可以选择一个好用的路由系统。本文选择了react-router 4。这里需要注意，在v4版本里，react-router将WEB部分的路由系统拆分至了react-router-dom，因此需要npmreact-router-dom
npm i --save react-router-dom
本例中我们使用react-router中的BrowserRouter组件包裹整个App应用，在其中使用Route组件用于匹配不同的路由时加载不同的页面组件。（也可以使用HashRouter，顾名思义，是使用hash来作为路径）react-router推荐使用BrowserRouter，BrowserRouter需要history相关的API支持。
首先，需要在App.js中添加BrowserRouter组件，并将Route组件放在BrowserRouter内。其中Route组件接收两个属性：path和component，分别是匹配的路径与加载渲染的组件
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import {store} from './store';
import {BrowserRouter, Route} from 'react-router-dom';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Route path='/' component={App}/>
</BrowserRouter>
</Provider>,
document.getElementById('root'));
此时我们启动服务器的效果和之前一直。因为此时路由匹配到了path='/'，因此加载了App组件。
还记得我们在最开始部分创建的Nav导航栏组件么？现在，我们就要实现导航功能：点击对应的导航栏链接，右侧显示不同的区域内容。这需要改造index.js中的content部分：我们为其添加两个Route组件，分别在不同的路径下加载不同的页面组件（welcome与goods）
// App.js
import React, { Component } from 'react';
import Nav from './component/nav';
import Welcome from './page/welcome';
import Goods from './page/goods';
import './App.css';
import {Route} from 'react-router-dom';
const LIST = [{
text: 'welcome',
url: '/welcome'
}, {
text: 'goods',
url: '/goods'
}];
class App extends Component {
render() {
return (
<div className="App">
<div className="nav_bar">
<Nav list={LIST} />
</div>
<div className="conent">
<Route path='/welcome' component={Welcome} />
<Route path='/goods' component={Goods} />
</div>
</div>
);
}
}
export default App;
现在，可以尝试在地址栏输入http://localhost:3000、http://localhost:3000/welcome和http://localhost:3000/goods来查看效果。
当然，实际项目里不可能是通过手动修改地址栏来“跳转”页面。所以需要用到Link这个组件。通过其中的to这个属性来指明“跳转”的地址。这个Link组件我们会添加到Nav组件中
// component/nav/index.js
import React from 'react';
import './index.css';
import {Link} from 'react-router-dom';
const Nav = props => (
<ul className="nav">
{
props.list.map((ele, idx) => (
<Link to={ele.url} key={idx}>
<li>{ele.text}</li>
</Link>
))
}
</ul>
);
export default Nav;
最终页面效果如下：
现在在这个demo里，我们点击左侧的导航，右侧内容发生变化，浏览器不会刷新。基于React+Redux+React-router，我们实现了一个最基础版的SPA（单页应用）。
额外的部分，异步请求
如果你还记得在redux数据流部分，是怎么给goods页面传入数据的：dispatch(actions.getGoods(GOODS))，我们直接给getGoods这个action构造器传入GOODS列表，作为加载的数据。但是，在实际的应用场景中，往往，我们会在action中发送ajax请求，从后端获取数据；在等待数据获取的过程中，可能还会有一个loading效果；最后收到了response响应，再渲染响应页面。
基于以上的场景，重新整理一下我们的action内的思路：
- component渲染完成后，触发一个action，
dispatch(actions.getGoods())。这个action并不会带列表的参数，而是向后端请求结果。 - 在
getGoods()这个方法里，主要会做这三件数：首先，触发一个requestGoods的action，用于表示现在正在请求数据；其次，会调用一个叫fetchData()的方法，这个就是向后端请求数据的方法；最后，在拿到数据后，再触发一个receiveGoods的action，用于标识请求完成并带上渲染的数据。 - 其他部分与之前类似。
这里就有一个问题，基于上面的讨论，我们需要actions.getGoods()这个方法返回一个function来实现我们在步骤2里所说的三个功能；然而，目前项目中的dispatch()方法只能接受一个object类型作为参数。所以，我们需要改造dispatch()方法。
改造的手段就是使用redux-thunk这个中间件。可以使action creator返回一个function（而不仅仅是object），并且使得dispatch方法可以接收一个function作为参数，通过这种改造使得action支持异步（或延迟）操作。
那么如何来改造呢？首先为redux加入redux-thunk这个中间件
npm i --save redux-thunk
然后修改store.js
// store.js
import {createStore, applyMiddleware, compose} from 'redux';
import {rootReducer} from './reducer';
import thunk from 'redux-thunk';
const middleware = [thunk];
export const store = createStore(rootReducer, compose(
applyMiddleware(...middleware)
));
然后，基于之前的思路，整理action中的代码。在这里，我们使用setTimeout来模拟向后端请求数据：
// action/goods.js
import {createAction} from 'redux-actions';
const GOODS = [{
name: 'iPhone 7',
price: '6,888',
amount: 37
}, {
name: 'iPad',
price: '3,488',
amount: 82
}, {
name: 'MacBook Pro',
price: '11,888',
amount: 15
}];
const requestGoods = createAction('REQUEST_GOODS');
const receiveGoods = createAction('RECEIVE_GOODS');
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(GOODS);
}, 1500);
});
};
export const getGoods = () => async dispatch => {
dispatch(requestGoods());
let goods = await fetchData();
dispatch(receiveGoods(goods));
};
相应地修改reducer中的代码
// reducer/goods.js
import {handleActions} from 'redux-actions';
export const goods = handleActions({
REQUEST_GOODS: (state, action) => ({
...state,
isFetching: true
}),
RECEIVE_GOODS: (state, action) => ({
...state,
isFetching: false,
data: action.payload
})
}, {
isFetching: false,
data: []
});
可以看到，我们添加了一个isFetching的状态来表示数据是否加载完毕。
最后，还需要更新UI component层
// page/goods.js
import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from '../action/goods';
class Goods extends Component {
componentDidMount() {
let dispatch = this.props.dispatch;
dispatch(actions.getGoods());
}
render() {
return this.props.isFetching ? (<h1>Loading…</h1>) : (
<ul className="goods">
{
this.props.goods.map((ele, idx) => (
<li key={idx} style={{marginBottom: 20, listStyle: 'none'}}>
<span>{ele.name}</span> |
<span>￥ {ele.price}</span> |
<span>剩余 {ele.amount} 件</span>
</li>
))
}
</ul>
);
}
}
const mapStateToProps = (state, ownProps) => ({
isFetching: state.goods.isFetching,
goods: state.goods.data
});
export default connect(mapStateToProps)(Goods);
最终，访问http://localhost:3000/goods页面会有一个大约1.5s的loading效果，然后等“后端”数据返回后渲染出列表。
最后的最后，如果你还没有走开
再介绍一个redux调试神器——redux-devTools，可以在chrome插件中可以找到
在开发者工具中使用，可以很方便的进行redux的调试
当然，需要在代码中进行简单的配置。对store.js进行一些小修改
import {createStore, applyMiddleware, compose} from 'redux';
import {rootReducer} from './reducer';
import thunk from 'redux-thunk';
const middleware = [thunk];
// export const store = createStore(rootReducer, compose(
// applyMiddleware(...middleware)
// ));
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(...middleware)
));
以上。
现在，你可以愉快地进行SPA的开发啦！本文中的demo可以点击这里获取。
