关于Angular+Redux项目的一些开发笔记
Introuction
对于一个网页应用来说,用户的每一次操作都会改变应用的“状态”,而Redux就是提供了记录一些“状态”的框架。例如说,有一个分页的列表,用户看到了第二页,那Redux就会把“看到了第二页”这个状态保存下来。关于更详细的Redux介绍和原理,可以先参考其他文章。本来这篇笔记是写给公司新人的培训内容,现在修改一下,分享到这。
Content
一个独立模块基本需要这些部分:1) xxx-routing.module.ts & xxx.module.ts 这是必不可少的2) actions目录3) reducers目录4) effects目录5) services目录6) pages & components 目录,组件化的开发模式需要把page和components分开7) 其他补充目录,如i18n, models等
2) ~ 4)则是redux的相关内容
初学这一块的时候,感觉概念复杂繁多,开发的时候难以入手,但实践后明确了各模块的作用,在脑中就有一个清晰的开发顺序,下面是我的一点思路。
【1】首先,从后端拿到接口,放在services里【2】要调用接口,必须要用this.store.dispatch(action)触发,则完善actions【3】dispatch之后,需要需要(类似reducer作用的)effects专门负责接口与action的互动和返回,则完善effects【4】effects中成功/失败获取到接口返回的内容,则将success/failure的action补充到reducer中,将信息存入store,则完善reducers,并补充相应的selectors
至此,我们把Redux的必要模块建立完毕,剩下的就是完善页面和业务。
Conclusion
状态管理的框架的引入,使我的js/ts更加简洁,不必在业务逻辑的文件里掺杂接口调用等重复且占用代码量多的语句,一定程度上增加了代码的可读性,只不过与之而来的是一定的门槛。如果把Store理解为一个全局变量,那就不难理解为什么要严格控制他的读写权限。
转载自:https://segmentfault.com/a/1190000041526988