Angular中使用ngrx/store做状态管理

引入

Angular中的状态管理大部分可以被service接管,那么在一些中大型的项目中,这样做的弊端就会显露出来,其中之一就是状态流混乱,不利于后期维护,后来便借鉴了redux的状态管理模式并配上rxjs流式编程的特点形成了@ngrx/store这么一个作用于Angular的状态管理工具.

状态管理的三个原则

状态管理三个原则引用自 vjjy001 状态管理

  • Single source of truth(单一状态对象)
    这个原则是整个单页应用的状态通过object tree(对象树)的形式存储在store 里面。这个定义十分抽象其实就是把所有需要共享的数据通过javascript 对象的形式存储下来
  • state is read-only(状态只能是只读形式)
    这个 ngrx/store 核心之一就是用户不能直接修改状态内容。 举个例子,如果我们需要保存了登录页面状态,状态信息需要记录登录用户的名字。 当登录名字改变,我们不能直接修改状态保存的用户名字
  • changes are made with pure functions(只能通过调用函数来改变状态)
    由于不能直接需改状态,ngrx/store 同时引入了一个叫做reducer(聚合器)的概念。通过reducer 来修改状态。

ngrx/store使用实例

安装@ngrx/store

配置

创建 state, action, reducer

注册store

使用store
在组件或服务中注入store进行使用

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复