fis3+react+react-router+redux单页面应用实践

基于 fis3+react+redux+react-router的单页面应用，目前应用在多个移动端业务线。

注意：本项目为剥离业务代码后的架子，只保留了基础UI样式及交互，demo中的数据全部是mock出来的。

单页面效果：

安装启动

• 安装依赖包 npm i --registry=https://registry.npm.taobao.org
• 启动fis3 server服务 fis3 server start
• 将代码推到fis3 server www文件中 fis3 release -cwL 修改代码可以自动刷新浏览器

技术栈

• fis3
• react
• redux
• react-router
• es6
• fetch

代码检测

npm run lint

项目目录结构

project
  ├─ node_modules   (npm模块)  
  ├─ app    (工程模块)
  │  ├─ actions  (获取数据并流向stores)
  │  │  └─ more
  │  ├─ components (组件)
  │  │  └─ more
  │  ├─ reducers  (每个store)
  │  │  ├─ index
  │  │  └─ detail
  │  └─ containers (页面)
  │     ├─ header
  │     └─ footer
  │  └─ router       (路由)
  │     ├─ cardDetail
  ├─ static    (非业务相关资源)
  │  ├─ lib  
  │  ├─ img
  │  ├─ js
  │  ├─ css
  ├─ config (配置)
     └─ server.conf （mock数据）
  ├─ fis-conf.js   (fis3编译配置)
  ├─ .eslintrc.json   (eslint配置)
  ├─ index.html   (入口文件)
  ...

组件化设计

要降低系统设计的复杂度，前端目前最好的方式就是组件化。将系统划分成若干个页面，然后将每个页面都划分成若干个组件，还要抽象出多个页面中都会用到的通用组件，这是第一步。接下来要看组件和组件之间如何传递数据，即数据管理和状态管理该如何做。

但是最后在开发过程中忽略了一个问题，就是一些复杂页面，光这种“页面 - 组件”的形式是不够的，应该在加一个subpage层，这样就扩展性更好一些了。如下图：

总结：一个项目总会遇到个别的比较复杂的页面，因此这种page - subpage - component会更加合理一些，其中的subpage在不需要的时候省略掉就是了。

数据请求管理

直接请求

这种形式，直接在业务的请求回调中处理。

• 系统数据，通过action的方法修改store的值
• 业务数据，更改业务组件的state值

getData().then(res => {
    return res.json()
}).then(json => {
    if (json.errno !== 0) {
        console.error('errno:' + json.errno);
        return;
    }
    var data = json.data;
    // 通过回调，更新系统数据
    this.props.collectlistActions.update(news)
    // 更改业务数据
    this.setState({hotnews: json.data.slice(1, 4)})
})

redux-thunk 中间件形式

// 调用
actions.getCardList()

//获取标签列表.
export const getCardList = () =>{
  return {
    type: types.Card_LIST,
    promise: api.getTagList()
  }
}

// cardList reducer

import { TAG_LIST_SUCCESS, TAG_LIST_FAILURE } from '../actions/types'
import { createReducer } from 'redux-immutablejs'
import {List} from 'immutable'

// 这个更新了store
export default createReducer(List(), {
  [TAG_LIST_SUCCESS]: (state, {json}) => state.merge(json.data),
  [TAG_LIST_FAILURE]: (state) => state
})

// 更新store之后，会重新render