Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的

举报
汪子熙 发表于 2022/12/17 09:20:01 2022/12/17
【摘要】 NgRX Store 将状态建模为 Store 内的单个简单 JavaScript 对象。 状态是不可变的或只读的。 这意味着没有直接的 Store API 来更改 Store 内的状态对象。

NgRX Store 将状态建模为 Store 内的单个简单 JavaScript 对象。 状态是不可变的或只读的。 这意味着没有直接的 Store API 来更改 Store 内的状态对象。 这种状态对象的一个例子可以表示为:

const state = {
    developer: []
};

Store 里存储着很多应用状态的切片,称之为 State.

Actions

为了更新 Store 中的状态,应用程序需要调度一个 Action. 一个 reducer,也称为纯函数,捕获这个动作,对状态执行更新,并返回一个新的修改后的不可变的状态对象。

一个动作的例子:

const action = {
    type: 'ADD_DEVELOPER',
    payload: {
        name: 'Bilal',
        competency: ['ASP.NET', 'Angular']
    }
};

上面的 type 属性说明了操作的意图。 在这种情况下,type 属性是 ADD_DEVELOPER,这意味着正在调度一个操作以添加存储在该操作的有效负载属性中的新 Developer 对象。 有效负载只是与reducer 添加到返回给Store 订阅者的新状态的操作类型相关的数据。

Reducer or Action Reducer

就状态管理库而言,Action Reducer 或 Reducer 是纯函数。 Reducers 响应动作并返回一个新的状态对象,其中包含状态内的所有更改,因此状态的不可变性质。 reducer 分析分发的动作,读入动作的有效负载,对 Store 内部的状态执行适当的动作,并返回一个全新的状态对象,其中包含所有更改。Reducer 的一个例子:

function reducer(state: State, action: Action) {
    const actionType = action.type;
    const developer = action.payload;

    switch (actionType) {
        case 'ADD_DEVELOPER': {
            const developers = [...state.developers, developer];
            return { developers }
        }
        ...
    }
}

在设置 ngrx/store 模块期间,我们使用应用程序中所有可用状态段及其对应的 reducer 之间的映射配置来 StoreModule 类。 换句话说,我们通过这种方式告诉 Store,当 Store 想更新一个特定的状态切片时,使用指定的 reducer。

在这里插入图片描述

上面代码的语义是,告诉 Store,当其需要更新 SITE_CONTEXT_FEATURE 代表的 Application State 时,请使用 reducerToken 代表的 Reducer 纯函数来进行。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。