干货react-coat，React+Redux微框架,支持typescript,支持SPA单页和SSR
项目github库css
4.0 发布
- 继承并扩展 3.0 的基本理念
- 去除 redux-saga，改用原生的 async 和 await 来组织和管理 effect
- 同时支持 SPA(单页应用)和 SSR(服务器渲染)、完整的支持客户端与服务端同构
react-coat 特色
- 集成 react、redux、react-router、history 等相关框架
- 仅为以上框架的糖衣外套，不改变其基本概念，无强侵入与破坏性
- 结构化前端工程、业务模块化，支持按需加载
- 同时支持 SPA(单页应用)和 SSR(服务器渲染)
- 使用 typescript 严格类型，更好的静态检查与智能提示
- 开源微框架，源码不到千行，几乎不用学习便可上手
安装 react-coat
$ npm install react-coat
复制代码
兼容性
各主流浏览器、IE9 或 IE9 以上前端
快速上手及 Demo
本框架上手简单react
-
8 个新概念：git
Effect、ActionHandler、Module、ModuleState、RootState、Model、View、Componentgithub
-
4 步建立：ajax
exportModel(), exportView(), exportModule(), createApp()typescript
-
3 个 Demo:npm
入手：Helloworldredux
进阶：SPA(单页应用)api
API 一览
与 蚂蚁金服 Dav 的异同
本框架与 Dvajs 理念略同，主要差别：
- 使用 typescript 强类型推断和检查
- 去除 redux-saga，使用 async、await 替代，简化代码的同时对 TS 类型支持更全面
- 路由组件化、无 Page 概念、更天然的 API 和更简单的组织结构
- 更大的灵活性和自由度，不强封装
- 支持 SPA(单页应用)和 SSR(服务器渲染)一键切换，
- 支持模块异步按需加载和同步加载一键切换
差别示例：使用强类型组织全部 reducer 和 effect
// Dva中常这样写
dispatch({ type: 'moduleA/query', payload:{username:"jimmy"}} })
//本框架中可直接利用ts类型反射和检查:
this.dispatch(moduleA.actions.query({username:"jimmy"}))
复制代码
差别示例：State 和 Actions 支持继承
// Dva不支持继承
// 本框架能够直接继承
class ModuleHandlers extends ArticleHandlers<State, PhotoResource> {
constructor() {
super({}, {api});
}
@effect()
protected async parseRouter() {
const result = await super.parseRouter();
this.dispatch(this.actions.putRouteData({showComment: true}));
return result;
}
@effect()
protected async [ModuleNames.photos + "/INIT"]() {
await super.onInit();
}
}
复制代码
差别示例：在 Dva 中，由于使用 redux-saga，假设在一个 effect 中使用 yield put 派发一个 action，以此来调用另外一个 effect，虽然 yield 能够等待 action 的派发，但并不能等待后续 effect 的处理：
// 在Dva中,updateState并不会等待otherModule/query的effect处理完毕了才执行
effects: {
* query (){
yield put({type: 'otherModule/query',payload:1});
yield put({type: 'updateState', payload: 2});
}
}
// 在本框架中,可以使用awiat关键字， updateState 会等待otherModule/query的effect处理完毕了才执行
class ModuleHandlers {
async query (){
await this.dispatch(otherModule.actions.query(1));
this.dispatch(thisModule.actions.updateState(2));
}
}
复制代码
差别示例：若是 ModuleA 进行某项操做成功以后，ModuleB 或 ModuleC 都须要 update 自已的 State，因为缺乏 action 的观察者模式，因此只能将 ModuleB 或 ModuleC 的刷新动做写死在 ModuleA 中：
// 在Dva中须要主动Put调用ModuleB或ModuleC的Action
effects: {
* update (){
...
if(callbackModuleName==="ModuleB"){
yield put({type: 'ModuleB/update',payload:1});
}else if(callbackModuleName==="ModuleC"){
yield put({type: 'ModuleC/update',payload:1});
}
}
}
// 在本框架中,可以使用ActionHandler观察者模式：
class ModuleB {
//在ModuleB中兼听"ModuleA/update"方法
async ["ModuleA/update"] (){
....
}
}
class ModuleC {
//在ModuleC中兼听"ModuleA/update"方法
async ["ModuleA/update"] (){
....
}
}
复制代码
基本概念与名词
前提：假设你已经熟悉了 React 和 Redux，有过必定的开发经验
Store、Reducer、Action、State、Dispatch
以上概念与 Redux 基本一致，本框架无强侵入性，遵循 react 和 redux 的理念和原则：
- M 和 V 之间使用单向数据流
- 整站保持单个 Store
- Store 为 Immutability 不可变数据
- 改变 Store 数据，必须经过 Reducer
- 调用 Reducer 必须经过显式的 dispatch Action
- Reducer 必须为 pure function 纯函数
- 有反作用的行为，所有放到 Effect 函数中
- 每一个 reducer 只能修改 Store 下的某个节点，但能够读取全部节点
- 路由组件化，不使用集中式配置
Effect
咱们知道在 Redux 中，改变 State 必须经过 dispatch action 以触发 reducer，在 reducer 中返回一个新的 state， reducer 是一个 pure function 纯函数，无任何反作用，只要入参相同，其返回结果也是相同的，而且是同步执行的。而 effect 是相对于 reducer 而言的，与 reducer 同样，它也必须经过 dispatch action 来触发，不一样的是：
- 它是一个非纯函数，能够包含反作用，能够无返回，也能够是异步的。
- 它不能直接改变 State，要改变 State，它必须再次 dispatch action 来触发 reducer
ActionHandler
咱们能够简单的认为：在 Redux 中 store.dispatch(action)，能够触发一个注册过的 reducer，看起来彷佛是一种观察者模式。推广到以上的 effect 概念，effect 一样是一个观察者。一个 action 被 dispatch，可能触发多个观察者被执行，它们多是 reducer，也多是 effect。因此 reducer 和 effect 统称为：ActionHandler
-
若是有一组 actionHandler 在兼听某一个 action，那它们的执行顺序是什么呢？
答：当一个 action 被 dispatch 时，最早执行的是全部的 reducer，它们被依次同步执行。全部的 reducer 执行完毕以后，才开始全部 effect 执行。
-
我想等待这一组 actionHandler 所有执行完毕以后，再下一步操做，但是 effect 是异步执行的，我如何知道全部的 effect 都被处理完毕了？ 答：本框架改良了 store.dispatch()方法，若是有 effect 兼听此 action，它会返回一个 Promise，因此你可使用 await store.dispatch({type:"search"}); 来等待全部的 effect 处理完成。
Module
当咱们接到一个复杂的前端项目时，首先要化繁为简，进行功能拆解。一般以高内聚、低偶合的原则对其进行模块划分，一个 Module 是相对独立的业务功能的集合，它一般包含一个 Model(用来处理业务逻辑)和一组 View(用来展现数据与交互)，须要注意的是：
- SPA 应用已经没有了 Page 的边界，不要以 Page 的概念来划分模块
- 一个 Module 可能包含一组 View，不要以 View 的概念来划分模块
Module 虽然是逻辑上的划分，但咱们习惯于用文件夹目录来组织与体现，例如：
src
├── modules
│ ├── user
│ │ ├── userOverview(Module)
│ │ ├── userTransaction(Module)
│ │ └── blacklist(Module)
│ ├── agent
│ │ ├── agentOverview(Module)
│ │ ├── agentBonus(Module)
│ │ └── agentSale(Module)
│ └── app(Module)
复制代码
经过以上能够看出，此工程包含 7 大模块 app、userOverview、userTransaction、blacklist、agentOverview、agentBonus、agentSale，虽然 modules 目录下面还有子目录 user、angent，但它们仅属于归类，不属于模块。咱们约定：
- 每一个 Module 是一个独立的文件夹
- Module 自己只有一级，可是能够放在多级的目录中进行归类
- 每一个 Module 文件夹名即为该 Module 名，由于全部 Module 都是平级的，因此须要保证 Module 名不重复，实践中，咱们能够经过 Typescript 的 enum 类型来保证，你也能够将全部 Module 都放在一级目录中。
- 每一个 Module 保持必定的独立性，它们能够被同步、异步、按需、动态加载
ModuleState、RootState
系统被划分为多个相对独立且平级的 Module，不只体如今文件夹目录，更体如今 Store 上。每一个 Module 负责维护和管理 Store 下的一个节点，咱们称之为 ModuleState，而整个 Store 咱们习惯称之为RootState
例如：某个 Store 数据结构:
{
router:{...},// StoreReducer
app:{...}, // ModuleState
userOverview:{...}, // ModuleState
userTransaction:{...}, // ModuleState
blacklist:{...}, // ModuleState
agentOverview:{...}, // ModuleState
agentBonus:{...}, // ModuleState
agentSale:{...} // ModuleState
}
复制代码
- 每一个 Module 管理并维护 Store 下的某一个节点，咱们称之为 ModuleState
- 每一个 ModuleState 都是 Store 的根子节点，并以 Module 名为 Key
- 每一个 Module 只能修改自已的 ModuleState，可是能够读取其它 ModuleState
- 每一个 Module 修改自已的 ModuleState，必须经过 dispatch action 来触发
- 每一个 Module 能够观察者身份，监听其它 Module 发出的 action，来配合修改自已的 ModuleState
你可能注意到上面 Store 的子节点中，第一个名为 router，它并非一个 ModuleState，而是一个由第三方 Reducer 生成的节点。咱们知道 Redux 中容许使用多个 Reducer 来共同维护 Stroe，并提供 combineReducers 方法来合并。因为 ModuleState 的 key 名即为 Module 名，因此：Module名天然也不能与其它第三方Reducer生成节点重名。
Model
在 Module 内部，咱们可进一步划分为一个model(维护数据)和一组view(展示交互)，此处的 Model 实际上指的是 view model，它主要包含两大功能：
- ModuleState 的定义
- ModuleState 的维护，前面有介绍过 ActionHandler，实际上就是对 ActionHandler 的编写
数据流是从 Model 单向流入 View，因此 Model 是独立的，是不依赖于 View 的。因此理论上即便没有 View，整个程序依然是能够经过命令行来驱动的。
咱们约定：
- 集中在一个名为model.js的文件中编写 Model，并将此文件放在本模块根目录下
- 集中在一个名为ModuleHandlers的 class 中编写 全部的 ActionHandler，每一个 reducer、effect 都对应该 class 中的一个方法
例如，userOverview 模块中的 Model:
src
├── modules
│ ├── user
│ │ ├── userOverview(Module)
│ │ │ ├──views
│ │ │ └──model.ts
│ │ │
复制代码
src/modules/user/userOverview/model.ts
// 定义本模块的ModuleState类型
export interface State extends BaseModuleState {
listSearch: {username:string; page:number; pageSize:number};
listItems: {uid:string; username:string; age:number}[];
listSummary: {page:number; pageSize:number; total:number};
loading: {
searchLoading: LoadingState;
};
}
// 定义本模块全部的ActionHandler
class ModuleHandlers extends BaseModuleHandlers<State, RootState, ModuleNames> {
constructor() {
// 定义本模块ModuleState的初始值
const initState: State = {
listSearch: {username:null, page:1, pageSize:20},
listItems: null,
listSummary: null,
loading: {
searchLoading: LoadingState.Stop,
},
};
super(initState);
}
// 一个reducer，用来update本模块的ModuleState
@reducer
public putSearchList({listItems, listSummary}): State {
return {...this.state, listItems, listSummary};
}
// 一个effect，使用ajax查询数据，而后dispatch action来触发以上putSearchList
// this.dispatch是store.dispatch的引用
// searchLoading指明将这个effect的执行状态注入到State.loading.searchLoading中
@effect("searchLoading")
public async searchList(options: {username?:string; page?:number; pageSize?:number} = {}) {
// this.state指向本模块的ModuleState
const listSearch = {...this.state.listSearch, ...options};
const {listItems, listSummary} = await api.searchList(listSearch);
this.dispatch(this.action.putSearchList({listItems, listSummary}));
}
// 一个effect，监听其它Module发出的Action，而后改变自已的ModuleState
// 由于是监听其它Module发出的Action，因此它不须要主动触发，使用非public权限对外隐藏
// @effect(null)表示不须要跟踪此effect的执行状态
@effect(null)
protected async ["@@router/LOCATION_CHANGE]() {
// this.rootState指向整个Store
if(this.rootState.router.location.pathname === "/list"){
// 使用await 来等待全部的actionHandler处理完成以后再返回
await this.dispatch(this.action.searchList());
}
}
}
复制代码
须要特别说明的是以上代码的最后一个 ActionHandler：
protected async ["@@router/LOCATION_CHANGE](){
// this.rootState指向整个Store
if(this.rootState.router.location.pathname === "/list"){
await this.dispatch(this.action.searchList());
}
}
复制代码
前面有强调过两点：
- Module 能够兼听其它 Module 发出的 Action，并配合来完成自已 ModuleState 的更新。
- Module 只能更新自已的 ModuleState 节点，可是能够读取整个 Store。
另外注意到语句：await this.dispatch(this.action.searchList())：
-
dispatch 派发一个名为 searchList 的 action 能够理解，但是为何前面还能 awiat？难道 dispatch action 也是异步的？
答：dispatch 派发 action 自己是同步的，咱们前面讲过 ActionHandler 的概念，一个 action 被 dispatch 时，可能有一组 reducer 或 effect 在兼听它，reducer 是同步处理的，但是 effect 多是异步处理的，若是你想等全部的兼听都执行完成以后，再作下一步操做，此处就可使用 await，不然，你能够不使用 await。
View、Component
在 Module 内部，咱们可进一步划分为一个model(维护数据)和一组view(展示交互)。因此一个 Module 中的 view 可能有多个，咱们习惯在 Module 根目录下建立一个名为 views 的文件夹：
例如，userOverview 模块中的 views:
src
├── modules
│ ├── user
│ │ ├── userOverview(Module)
│ │ │ ├──views
│ │ │ │ ├──imgs
│ │ │ │ ├──List
│ │ │ │ │ ├──index.css
│ │ │ │ │ └──index.ts
│ │ │ │ ├──Main
│ │ │ │ │ ├──index.css
│ │ │ │ │ └──index.ts
│ │ │ │ └──index.ts
│ │ │ │
│ │ │ │
│ │ │ └──model.ts
│ │ │
复制代码
- 每一个 view 实际上是一个 React Component 类，因此使用大写字母打头
- 对于 css 和 img 等附属资源，若是是属于某个 view 私有的，跟随 view 放到一块儿，若是是多个 view 公有的，提出来放到公共目录中。
- view 能够嵌套，包括能够给别的 Module 中的 view 嵌套，若是须要给别的 Module 使用，必须在 views/index.ts 中使用
exportView()导出。 - 在 view 中经过 dispatch action 的方式触发 Model 中的 ActionHandler，除了能够 dispatch 本模块的 action，也能 dispatch 其它模块的 action
例如，某个 LoginForm：
interface Props extends DispatchProp {
logining: boolean;
}
class Component extends React.PureComponent<Props> {
public onLogin = (evt: any) => {
evt.stopPropagation();
evt.preventDefault();
// 发出本模块的action，将触发本model中定义的名为login的ActionHandler
this.props.dispatch(thisModule.actions.login({username: "", password: ""}));
};
public render() {
const {logining} = this.props;
return (
<form className="app-Login" onSubmit={this.onLogin}>
<h3>请登陆</h3>
<ul>
<li><input name="username" placeholder="Username" /></li>
<li><input name="password" type="password" placeholder="Password" /></li>
<li><input type="submit" value="Login" disabled={logining} /></li>
</ul>
</form>
);
}
}
const mapStateToProps = (state: RootState) => {
return {
logining: state.app.loading.login !== LoadingState.Stop,
};
};
export default connect(mapStateToProps)(Component);
复制代码
从以上代码可看出，View 就是一个 Component，那 View 和 Component 有区别吗？编码上没有，逻辑上是有的：
- view 体现的是 ModuleState 的视图展示，更偏重于表现特定的具体的业务逻辑，因此它的 props 通常是直接用 mapStateToProps connect 到 store。
- component 体现的是一个没有业务逻辑上下文的纯组件，它的 props 通常来源于父级传递。
- component 一般是公共的，而 view 一般非公用
路由与动态加载
react-coat 赞同 react-router 4 组件化路由的理念，路由即组件，嵌套路由比如嵌套 component 同样简单，无需繁琐的配置。如：
import {BottomNav} from "modules/navs/views"; // BottomNav 来自于 navs 模块
import LoginForm from "./LoginForm"; // LoginForm 来自于本模块
// PhotosView 和 VideosView 分别来自于 photos 模块和 videos 模块，使用异步按需加载
const PhotosView = loadView(moduleGetter, ModuleNames.photos, "Main");
const VideosView = loadView(moduleGetter, ModuleNames.videos, "Main");
<div className="g-page">
<Switch>
<Route exact={false} path="/photos" component={PhotosView} />
<Route exact={false} path="/videos" component={VideosView} />
<Route exact={true} path="/login" component={LoginForm} />
</Switch>
<BottomNav />
</div>
复制代码
以上某个 view 中以不一样加载方式嵌套了多个其它 view：
- BottomNav 是一个名为 navs 模块下的 view，直接嵌套意味着它会同步加载到本 view 中
- LoginForm 是本模块下的一个 view，因此直接用相对路径引用，一样直接嵌套，意味着它会同步加载
- PhotosView 和 VideosView 来自于别的模块，可是是经过 loadView()获取和 Route 嵌套，意味着它们会异步按需加载，固然你也能够直接 import {PhotosView} from "modules/photos/views"来同步按需加载
因此本框架对于模块和视图的加载灵活简单，无需复杂配置与修改：
- 不论是同步、异步、按：需、动态加载，要改变的仅仅是加载方式，而不用修改被加载的模块。模块自己并不须要事先拟定自已将被谁、以何种方式加载，保证的模块的独立性。
- 前面讲过，view 是 model 数据的展示，那嵌入其它模块 view 时，是否还要导入其它模块的 model 呢？无需，框架将自动导入。
- 1. Vue TypeScript 支持
- 2. React 脚手架支持Typescript和Sass
- 3. subline text3 支持 typescript
- 4. jfinal框架增长微信jsapi支持
- 5. Mui框架支持微信支付宝支付源代码
- 6. web.py框架之i18n支持
- 7. CAS框架支持的SAML
- 8. vollery框架支持https
- 9. 眼监控现已支持支持网页版微信监控
- 10. 让 js 模块支持 typescript
- 更多相关文章...
- • R 绘图 - 中文支持 - R 语言教程
- • SVN分支 - SVN 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • Spring Cloud 微服务实战(三) - 服务注册与发现
-
每一个你不满意的现在，都有一个你没有努力的曾经。