react中dispatch_轻量级的React数据流及状态管理解决方案，支持SSR服务器端渲染

介绍

笔者在浏览Github的React专题时偶然发现了一个类似于dva.js的React状态和数据流管理框架——react-coat，其本身不对React进行任何的封装和改进，使用Class的方式组织Model，支持继承，但不强制使用，React生态圈开放、自由、繁荣，带来的问题就是复杂。结合作者的介绍，react-coat放弃了某些灵活性，约定替代配置，固化某些最佳实践，从而给予开发者最简洁的糖衣外套！

---

---

本文初衷

由于笔者目前处于一个技术的积累阶段，介绍一个框架或者一个技术并不是为了让大家真的去使用，而是从诸多技术中寻找灵感，不断地去学习才能找到自己的突破点，特别是在自身已经比较的熟练或者熟悉某一个方向，但是却又迷茫的时候，这时候多看看别人的东西或许能够成为自身突破的一个关键，网络上也是对各种技术框架褒贬不一，而作为一个学习者，那么本身 不必在乎技术的使用，更多的可能是其传达的思想，以便于达到举一反三的效果，特别是对技术感兴趣的同行们，自身实力过硬才是硬道理！

---

---

react-coat

学习一个框架或者技术首先是需要了解他的特点(以下是Github中文README中的介绍)：

• 集成 react、redux、react-router、history 等相关框架
• 仅为以上框架的糖衣外套，不改变其基本概念，无强侵入与破坏性
• 结构化前端工程、业务模块化，支持按需加载
• 使用 typescript 严格类型，更好的静态检查与智能提示
• 开源微框架，源码不到千行，几乎不用学习即可上手
• 去除 redux-saga，改用原生的 async 和 await 来组织和管理 effect
• 同时支持 SPA(单页应用)和 SSR(服务器渲染)、完整的支持客户端与服务端同构

---

从其特点可以看出，首先它是开源的，然后它还是小巧的，这样就给我们学习带来了方便，不到千行的代码量，我相信比起那些个重量级的框架来说，无论是学习还是使用都应该是相对容易的。react-coat的理念与dvaJS略同，Github上也提供了深度的对比，感兴趣的小伙伴可以参考原文！

PS：Github关键字： react-coat

代码示例

// 仅需一个类，搞定 action、dispatch、reducer、effect、loadingclass ModuleHandlers extends BaseModuleHandlers { @reducer protected putCurUser(curUser: CurUser): State { return {...this.state, curUser}; } @reducer public putShowLoginPop(showLoginPop: boolean): State { return {...this.state, showLoginPop}; } @effect("login") // 使用自定义loading状态 public async login(payload: {username: string; password: string}) { const loginResult = await sessionService.api.login(payload); if (!loginResult.error) { // this.updateState()是this.dispatch(this.actions.updateState(...))的快捷 this.updateState({curUser: loginResult.data}); Toast.success("欢迎您回来！"); } else { Toast.fail(loginResult.error.message); } } // uncatched错误会触发@@framework/ERROR，监听并发送给后台 @effect(null) // 不需要loading，设置为null protected async ["@@framework/ERROR"](error: CustomError) { if (error.code === "401") { // dispatch Action：putShowLoginPop this.dispatch(this.actions.putShowLoginPop(true)); } else if (error.code === "301" || error.code === "302") { // dispatch Action：路由跳转 this.dispatch(this.routerActions.replace(error.detail)); } else { Toast.fail(error.message); await settingsService.api.reportError(error); } } // 监听自已的INIT Action，做一些异步数据请求 @effect() protected async ["app/INIT"]() { const [projectConfig, curUser] = await Promise.all([ settingsService.api.getSettings(), sessionService.api.getCurUser() ]); // this.updateState()是this.dispatch(this.actions.updateState(...))的快捷 this.updateState({ projectConfig, curUser, }); }}

---

安装

npm install react-coat

---

或者省心的做法，将包含所有依赖项

npm install react-coat-pkg

---

兼容性

各主流浏览器、IE9 或 IE9 以上，本框架依赖于完整版"Promise"，低版本浏览器请自行安装 polyfill，推荐安装@babel/polyfill，该库可模拟 unhandledrejection error，当你需要在客户端捕捉错误并上报时需要。

快速上手

本框架上手简单

• 8 个新概念：

Effect、ActionHandler、Module、ModuleState、RootState、Model、View、Component

• 4 步创建：

exportModel(), exportView(), exportModule(), createApp()

• 3 个 Demo(Github上提供了完整的DEMO)，循序渐进:

SPA(单页) Helloworld

SPA(单页) 进一步优化

SPA(单页) + SSR(服务器渲染)

---

详细的文档可以直接查看Github中的介绍，包含了概念、示例、API以及还有和一些框架(DVA)的对比

---

---

总结

任何框架或者技术的出现都是为了解决某些特定或者共性的问题，React作为前端最流行的框架之一，还是值得前端开发者所学习的，不必纠结只学React或者Vue，甚至还有Flutter，一般一个技术的诞生以及壮大，无疑不是解决了某些常见的痛点，而最毫无疑问的是其思想上突破，学习也是一样！

---

---