易于开发

• 开发工具是否完善
• 生态圈是否繁荣
• 社区是否活跃

易于扩展

• 增加新功能是否容易
• 新功能是否会显著增加系统复杂度

易于维护

• 代码是否容易理解 ESLint
• 文档是否健全 注释、架构图、文档

易于测试

• 功能的分层是否清晰
• 副作用少
• 尽量使用纯函数

易于构建

• 使用通用技术和架构
• 构建工具的选择

一 拆分复杂度

按领域模型（feature）组织代码，降低耦合度

项目初期：规模小，模块关系清晰

项目逐渐复杂，添加了更多组件和其他元素

项目收尾：文件结构，模块依赖错综复杂

将业务逻辑拆分成高内聚松耦合的模块

通过React技术栈实现

02 文件夹结构

• 按feature 组织源文件
• 组件和样式文件同一级
• Redux单独文件夹
• 单元测试保持同样目录结构放在tests文件夹

拆分后组织组件和样式

features/examples/index.js

export {default as SidePanel} from './SidePanel';
export {default as WelcomePage} from './WelcomePage';
export {defalut as CounterPage} from './CounterPage';
export {defaut as Layout} from './Layout';
// ...

features/examples/style.less

@import '../../styles/misins';
@import './SidePanel';
@import './WelcomePage';
@import './Layout';

拆分后组织Action 和 Reducer

CounterPlusOne.js

features/examples/redux/actions.js

export {counterPlusOne} from './counterPlusOne';
export {counterMiunsOne} from './counterMiunsOne';
//...

features/examples/redux/reducer.js

import initialState from './initialState';
import {reducer as counterPlusOneReducer} from './counterPlusOne';
import {reducer as counterMiunsOneReducer} from './counterMiunsOne';

const reducers = [
    counterPlusOneReducer,
    counterMiunsOneReducer
]

export default function reducer(state = initialState, action){
    let newState;
    switch(action.type){
        // Handle cross-topic actions here
        default:
            newState = state;
            break;
    }
    return reducers.reduce((s, r)=> r(s, action), newState)
}

constants.js

common/rootReducer.js

import {combineReducers} from 'redux';
import {routerReducer} from 'react-router-redux';
import homeReducer from '../features/home/redux/reducer';
import examplesReducer from '../reatures/examples/redux/reducer';

const reducerMap = {
    router: routerReducer,
    home: homeReducer,
    examples: examplesReducer
}

export default combineReducers(reducerMap);

使用时

function mapStateToProps(state){
    return {
      examples: state.examples   
    }
}
export dufault connect(mapStateToProps, null)(nowComponent)

在每个feature中单独定义自己的路由

使用JSON定义顶层路由

解析JSON路由到React Router语法