为什么我要再为Angular发明一个状态管理框架?

0_1521604848694_1*MlK30c4eLyO_4I-PUwjqSw.png

我搞自己的状态管理框架并非纯粹为了好玩儿。

实际上,我曾经尽量避免重新造轮子。所以刚开始的时候,我搞了一个叫ngrx-actions的东西,它对NgRX进行了一些封装,主要用来解决我自己遇到的一些痛点。

但是搞到最后,我发现ngrx-actions只不过是一些hack性质的小修小补而已,搞得我经常要跟着NgRX的架构做一些艰难的抉择。

所以,我不得不搞了一个自己的框架,叫做NGXS,我从Redux里面借鉴了很多概念,然后用Angular的风格重新实现了一把。

那么问题就来了,NGXS主要是为了解决哪些问题呢?

Redux是针对React设计的

Redux一开始就是针对React而设计,它所有的概念都是围绕React展开的。比如说,Redux更倾向于使用纯函数而不是class。

因为Redux是针对React设计的,它和Angular做集成的时候不是特别爽,所以后来才有了NgRX。

在我看来,NgRX更像是Redux的一个兼容层,而不能完全适配Angular世界里所倡导的那些理念,比如CQRS

一堆Switch语句

对于状态管理而言,switch语句是一个很好的工厂模式。但是,我认为这是一种过时的方式。在今天看来,JavaScript/TypeScript已经在语言层面上提供了很多新特性,可以实现这种需求。

代码风格更像Angular

Angular大面积使用了class和decorator机制。如果在我们自己的代码库里面没有实现Redux模式,我们最终可能只是引入了一个纯函数机制,加上一堆switch语句而已。

所以,我想把Angular的代码风格引入到状态管理机制里面来,用class来描述状态容器,用decorator来描述状态上的actions。

依赖注入

Angular是完全基于依赖注入机制来构建的,我们会到处使用这种机制。因为有依赖注入机制,所以在开发的过程中,我们会有各种好用的工具,但是在使用纯函数的时候,有很多工具就没法使用。

在React的领域,没有依赖注入机制,所以在我们自己的reducer里面,只要import某个类似service的东西进来,然后就可以直接使用了。

在Angular里面,由于有DI机制,所以我们不能使用Redux的这些模式。

引用地狱

在典型的NgRX配置里面,我们会用到这些东西:Actions、Effects、Reducers、Selects。这样我们就需要引入4份文件,当然,我们可以把它们合并到一起。

但是,这样还是不符合注意点分离原则。所以,NgRX做了很大的努力来避免这种状况,主要的方式是:创建简单的状态管理容器和相关的actions。

Effects可能会很痛苦

对于监听事件流来说,NgRX Effects是一种非常酷的方法,但是构造、阅读、维护起来都非常繁琐,而且不太容易教会其他开发者。

如想用好Effects,我们必须首先成为RxJS专家,同时,在使用的过程中,Effects很容易导致一些不可预测的副作用。

监听派发出来的Actions

我们经常会遇到这样一种情况:调用某个Service保存一些东西、然后在组件里面监听这个服务返回的结果。

但是,我们并没有一种很方便的方法可以知道这个action chain(动作链)什么时候会结束,所以,最终我们只能在自己的状态里面创建一些虚拟的model,然后在视图里面监听这些model。

坦诚地讲,这些东西一开始就不应该出现在状态里面。当我们派发的某件事件完成之后,应该有一种简单的方式来监听到,用NGXS就可以订阅这些派发的事件。

支持Promise

Observable很酷,但是它并非银弹。很多时候我们还是需要Promise,在NGXS里面,两种东西都可以使用。

上手玩

如果你也曾经碰到以上所述的困惑,推荐你来试试NGXS。它是我自己日常使用的解决方案,虽然并不完美,但是目前看来效果还不错。

0_1521607720432_1*vbqlSADJTOxph6KPRMEBDQ.png

英文原文链接:https://medium.com/@amcdnl/why-another-state-management-framework-for-angular-b4b4c19ef664

【特别说明:意译并改写,并不100%忠实于原文。】

@Action 注解确实不错,看着很漂亮呢

github看到博主star了 ngxs就去看了下,之前在看ngrx实在看不下去,但是现在ngxs直接运行不起来。有哪位兄台在项目中用过状态管理的吗。ngrx或这个都行。看的好崩溃,对比vuex,angular状态管理真的麻烦

@sqaiyan ngrx 的项目里面不是有个example吗?里面使用挺详细的。

这个状态管理方案的Angular味道更浓。
下次就试试这个。

有没有人考虑将它与localforage做个集成?

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待