首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

@ngrx/reducer: createReducer()和on()不是类型安全的吗?

@ngrx/reducer是一个用于状态管理的库,它提供了一些函数和工具来帮助开发者管理应用程序的状态。

在@ngrx/reducer中,createReducer()和on()是两个关键的函数。它们被用于定义状态的初始值和处理不同的action。然而,从类型安全的角度来看,它们并不是完全类型安全的。

createReducer()函数用于创建一个reducer函数,它接受一个初始状态和一系列的action处理函数。它的定义类似于下面的代码:

代码语言:txt
复制
function createReducer(initialState, ...handlers) {
  return function reducer(state = initialState, action) {
    for (const handler of handlers) {
      state = handler(state, action);
    }
    return state;
  }
}

在这里,createReducer()函数接受初始状态和一系列的action处理函数作为参数。然而,由于JavaScript的灵活性,这些函数的参数和返回值并没有强制的类型检查。因此,如果不小心传入错误的类型或者处理函数返回错误的类型,可能会导致类型错误或运行时错误。

类似地,on()函数用于定义处理具体action的处理函数,它的定义类似于下面的代码:

代码语言:txt
复制
function on(action, handler) {
  return function (state, action) {
    if (action.type === action) {
      return handler(state, action);
    } else {
      return state;
    }
  }
}

在这里,on()函数接受一个action和一个处理函数作为参数。然而,同样由于JavaScript的灵活性,它也没有强制的类型检查,因此可能会存在类型错误的问题。

为了解决这个问题,可以使用TypeScript等静态类型检查工具来提供类型安全。通过使用这些工具,可以在编译时就捕获类型错误,避免在运行时出现类型错误。

总结起来,虽然createReducer()和on()函数在类型安全方面存在一定的限制,但可以通过使用静态类型检查工具来提供类型安全。这样可以避免类型错误,提高开发效率和代码质量。

请注意,以上答案中没有提及任何具体的腾讯云产品或链接地址,这是因为问题中要求不提及任何特定的云计算品牌商。如有需要,您可以自行查阅相关腾讯云产品文档或官方网站获取更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 接入 NGRX 状态管理

NGRX 状态管理生命周期图中包含了以下元素: Store:集中的状态存储; Action:根据用户所触的不同事件执行不同的 Action ; Reducer:根据不同的 Action 对 Store...metaReducers }), StoreDevtoolsModule.instrument(), ], ... }) export class AppModule {} 创建用于添加和删除用户的...,并使用 props 约束所接收的参数类型; 增加用于删除用户的DelUser,并使用emptyProps表示不传递任何参数(仅存储一位用户); 创建根据 Action 来更新状态的 Reducer:.../index.ts --skip-tests 生成 app/store/reducers/user.reducer.ts 并更新 app/store/index.ts: import { createReducer...[] : []; 添加核心更改状态的代码到 app/store/reducers/user.reducer.ts : import { createReducer, on } from '@ngrx/store

28010

angular4实战(4)ngrx

同react-redux 相似,ngrx的核心也是通过reducer来获取储存在store中的值(状态),通过action来改变store的中值(状态)。...ngrx和react-redux本质没什么区别。 定义loading的action和reducer 在项目中创建ngrx文件夹,并在之下创建action和reducer文件。...关联store ngrx的关联通过在app.module.ts将StoreModule注入reducer。...,才会启动检查策略,这里值的注意的是,这个输入的对象需要变化成一个新对象时,组件才会进行检查,而不是仅仅是改变属性的值,或者增减对象的元素。...ps:这里边个人理解是因为每一个简单类型的值,都会在新开栈上来存储,而对象不同,对象存在同一个指针的引用(是否可以类似深浅拷贝,这里打个问号); 一篇国外的文章帮助理解:https://blog.thoughtram.io

1.1K30
  • Redux Toolkit

    安装 使用 React 和 Redux 启动新应用程序的推荐方法是使用官方 Redux+JS 模板或Redux+TS 模板来创建 React App,它利用了Redux Toolkit和 React Redux...: { counter: counterReducer, }, }); createReducer():这使您可以为 case reducer 函数提供操作类型的查找表,而不是编写 switch...函数的对象、切片名称和初始状态值,并自动生成切片reducer,并带有相应的动作创建者和动作类型。...createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk import { createAsyncThunk...;//默认导出 createEntityAdapter: 生成一组可重用的 reducer 和 selector 来管理 store 中的规范化数据 重新选择库中的createSelector实用程序,

    13010

    redux 文档到底说了什么(下)

    手动配置常用中间件和 Chrome 的 dev tool 手动将 slice 分类,并暴露 reducer 手动 Normalization: 将 todos 数据结构变成 {ids: [], entities...}) const store = configureStore({ reducer, devTools: true }) 可以和之前的 createStore 对比一下,configureStore...等等的方法,这些 API 用起来就和用 Sequlize 这个库来操作数据库没什么区别,不足的地方是 payload 一定要按照它规定的格式,如 updateOne 的 payload 类型就得这样的...createReducer + createAction 其实 redux-toolkit 里面有挺多好的东西的,上面所说的 API 大概覆盖了 80% 了,剩下的还有 createReducer 和...这里一定要注意:createAction 和 createReducer 是并列的,createSlice 类似于前两个的结合,createSlice 更强大一些。

    78420

    Redux(二):组织reducer

    reducer是一个可预测的纯函数,接收2个参数:当前的state和action,然后返回更新后的state。...这个例子中包含2种数据状态:visibilityFilter和todos,且每一个case的代码块值关心其中的一个数据状态,所以简单改造一下: function setVisibilityFilter...reducer需要做的仅仅是返回一个包含2个属性visibilityFilter和todos的对象,对象的属性值就是上边2个子reducer的执行结果: function appReducer(state...所以我们需要先编写一个createReducer函数来生成一个函数,这个生成的函数就是我们的子reducer: function createReducer(initialState,handlers)...Reducer本质上就是纯函数,每一次派发action都会导致Reducer的执行,而Reducer的内部通过条件语句下发到子reducer,最终计算出新的state状态树并更新store。

    51630

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    我们Input从Angular代码导入,并将其用作类型为Array的任何类型对象的类级变量卡的装饰器。...每次用户向我们的输入和浏览器输出中输入数据时input $event,我们都会将其分配newCard.text给输入值。 在我们实现它之前还有一件事:这个输入看起来有点多,不是吗?...Actions 由动作类型和可选的有效载荷组成: export interface Action { type: string; payload?...让我们再往前走一步,并确保如果我们的应用程序状态将包含多种类型的数据,我们从每种类型的单独孤立状态进行组合。...但是这个代码仍然是不可用的,因为我们不在我们的应用中包含我们的reducer(reducer和metaReducer)。

    42.7K10

    Redux + Hooks 工程实践

    首先先表明一下,这篇文章并不讨论是不是应该使用 Redux,这是一个比较大的话题,应该单独水一篇。...这时候就有同学可能要问了,你讲 Redux,那和 hooks 又有啥子关系呢。众所周知,在 React 团队推出 Hooks 这个概念后不久,Redux 也更新了对应的 API 来支持。.../checkStore'; // 做类型安全检测的,不用关心 function createReducer(injectedReducers = {}) { return history => combineReducers...逻辑通过注释分为了三段(第三段在 reducer 场景下没用到),第一段我们通过当前组件所处的 redux 上下文,拿到了 store 的引用,第二段与第三段我们分别让组件在 初始化 和 销毁前 执行挂载与解除挂载的操作...Hooks ,例如我们需要提供一个数组数据简单操作,我们只关心 添加 和 数量,就可以封装一个 Hooks,这样实际使用方只需要关心 添加 和 数量 这两个要素,不用关心 redux 的具体实现方式了

    53010

    Golang 语言中 map 的键值类型选择,它是并发安全的吗?

    我们知道 map 的键必须支持判等操作,本文我们主要讨论的话题是 golang 语言的 map 键类型怎么选择,和 map 是并发安全的吗?...此外,数组类型也和空接口类型存在相同的问题,即如果 map 的 key 的类型是数组类型,我们需要确保数组元素的类型不是func、map 和 slice。...03 构建并发安全的 map golang 语言的 map 不是并发安全的,即在同一段时间,使用多个 goroutine 操作同一个 map是不安全的。...05 总结 本文我们讨论了 map 的键类型怎么选择,和 map 是并发安全的吗?...介绍了 map 的键类型为什么需要支持判等操作,通过示例代码,证明原生 map 不是并发安全的,并且介绍怎么通过使用 sync 包的锁和原生 map 构建并发安全的 map,还介绍了官方提供的并发安全的

    1K10

    Dva 底层是如何组织起 Redux 数据流的?

    但随之而来通常会有这样的疑问:概念太多,并且 reducer, saga, action 都是分离的(分文件)。 文件切换问题。...对于绝大多数不是特别复杂的场景来说,目前可以被 Hooks 取代 Dva 的适用场景 业务场景:组件间通信多,业务复杂,需要引入状态管理的项目 技术场景:使用 React Class Component...Reducer 描述如何改变数据的纯函数,接受两个参数:已有结果和 action 传入的数据,通过运算得到新的 state。 Effects(Side Effects) 副作用,常见的表现为异步操作。...(app, createReducer, reducers, unlisteners, onError); /** * Create global reducer for redux...setupApp 可以看见针对 router 相关的 reducer 和中间件配置,其中 connectRouter 和 routerMiddleware 均使用了 connected-react-router

    1.4K10

    你真的懂 Java 的内存管理和引用类型吗?

    本文将会对 Java 的内存管理以及四种引用类型,做一个总结。 一、Java 内存管理 ---- Java 内存管理就是对象的分配和释放问题。...栈区:当方法被执行时,方法体内的局部变量(包括基础数据类型、对象的引用)都在栈上创建,并在方法执行结束时。这些局部变量所持有的内存将会自动被释放。...结论: 局部变量的基本数据类型和引用存储于栈中,引用的对象实体存储在堆中 —— 因为他们属于方法中的变量,生命周期随方法而结束 成员变量全部存储于堆中(包括基本数据类型,引用和引用的对象实体)—— 因为它们属于类...根据老年代的特点,提出了另一种「标记 — 整理」算法,标记过程仍然与「标记 — 清理」算法一样,但后续步骤不是直接对可回收对象进行清理,而是让所有存活的对象都向一端移动,然后直接清理掉边界以外的内存。...二、Java 的引用类型 ---- 在 JDK 1.2 以前,Java 中引用的定义很传统:如果 reference 类型的数据中存储的数值代表的是另外一块内存的起始地址,就称这块内存代表着一个引用。

    71320

    网络协议安全,Java语言如何应对常见的安全威胁和攻击类型?

    通过分析常见的安全威胁和攻击类型,设计和实施安全协议,保护网络通信的机密性、完整性和可用性等主题,为读者提供一些有益的思路和方法。...摘要  本文主要从网络协议的安全性入手,分析常见的安全威胁和攻击类型,并介绍如何通过设计和实施安全协议来保护网络通信的机密性、完整性和可用性。...本文将以Java开发语言为例,深入探讨网络协议的安全性问题,分析常见的安全威胁和攻击类型,介绍如何通过设计和实施安全协议来保护网络通信的机密性、完整性和可用性,为读者提供有益的参考和借鉴。...小结  网络协议的安全性直接关系到网络通信的安全,对于Java开发者来说,深入了解网络协议的安全性问题,掌握常见的安全威胁和攻击类型,掌握SSL/TLS协议和常用的加密算法的实现方式,以及使用Java提供的安全相关...总结  本文从网络协议的安全性入手,分析了常见的安全威胁和攻击类型,并介绍了如何通过设计和实施安全协议来保护网络通信的机密性、完整性和可用性。

    63332

    4. Navigation实战

    本来想写一个应用redux的Navigation实战,但是发现react-native有又新的更新,新手怕误导大家,就直接用了别人的组件,看看怎么应用吧。...修改原来index.ios.js和index.android.js如下: 'use strict'; import React, {Component, PropTypes} from 'react'...,这样才能充分解耦,可以应用函数式的思想做你任何想做的事,比如在store.js里的thunk就是利用这一点扩展redux进而支持异步请求API等操作,还有很多这样的组件被称作中间件,比如logger等等...return style; }; class Nav extends React.Component { render() { return ( createReducer...总结 写的不是那么详细,一边学习一边看吧,附上github地址,可预见的错误: tabbar的icon不显示,需要link,推荐安装rnpm然后rnpm link 一直红屏,修改代码无用或是诸如Login

    80120

    深入理解 @ngrxeffects 中 ofType 的用法与使用场景

    在 Angular 应用中,使用 @ngrx/effects 的目的是处理带有副作用的逻辑,比如与服务端的交互、日志记录或导航操作。...而 ofType 是 @ngrx/effects 提供的一个操作符,专门用于筛选特定类型的 Action,帮助开发者更高效地构建可维护的状态管理代码。...本文将深入探讨 ofType 的用法和典型使用场景,结合运行代码示例逐步展开。...核心特点基于类型筛选:只处理与指定类型匹配的 Action,避免对无关的 Action 进行处理。类型安全:结合 TypeScript 类型推导,确保代码的正确性和可读性。...ofType 通过筛选特定类型的 Action,避免不相关的逻辑干扰,确保副作用处理的精准性。2. 是否可以动态生成类型?ofType 接受静态类型作为参数。

    6000

    react项目架构之路初探

    如果采用传统的开发方式,mvc的架构不明确,页面(view)和逻辑层(controller)紧耦合,代码逻辑重复性工作较多,使用更改state的方式 去渲染页面, 如果遇到组件之间的传值,数据流通不明确...reduxsauce 传统开发中reducer中区分不同的action 使用的是switch case的结构 针对每一个action的type进行判断 使用reduxsauce之后 我认为 它和.../reducer/table' import {createTypes} from 'reduxsauce' // 引入首页信息数据 和 商品信息数据 import { getBackData, getGoodsInfo...只影响修改的节点和父节点 其他节点共享 节省了性能损耗 */ import Immutable from 'seamless-immutable' import { createReducer...代码最后的put 执行到reducer中设置state中分页数据和每页的返回数据 export function * init () { while (true) { const action

    2.5K10

    给2019前端开发的你5个进阶建议~

    庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。.../SUCCESS/ERROR 这 3 个action,我们通过 FetchTypes 类型来自动生成对应到 3 个 action 如何组织 Store/Reducer?...reducer 和 view 不必一一对应,应用中同时存在组件树和状态树,按照各自需要去组织,通过 connect 来绑定状态树的一个或多个分支到组件树 通过构造一些预设数据类型来减少样板代码。...再也不需要前后端接口约定文档,使用代码保证前端取数和后端接口定义完全一致 另外 iron-redux 能接收到 Pont 接口响应数据格式,并推导出整个 Redux 状态树的静态类型定义,Store...,互相学习,营造技术文化氛围 总结 以上5点当然不是我们技术的全部。

    1K10

    你的应用安全吗? ——用Xray和Synk保驾护航

    安全检测已成为当前DevOps流程的重要组成部分。 二、你的应用安全吗 据不完全统计,现在有78%的企业都在使用开源软件。...大部分的使用者选择相信开源软件的创造和维护者会保证其安全性。然而,下图的统计数据表明,安全性并不是开源软件维护者的维护重点。...4.png 如上图所示,当Artifactory仓库中新加入了制品包,设置了对其监视的Xray就会启动安全检查,并报告查到的安全漏洞和License授权情况。...Xray可以通过和Snyk的集成,实现利用Snyk的商业漏洞数据库进行安全漏洞检查。 8.png 当然,基于自身的商业漏洞数据库,Snyk也提供了安全漏洞的扫描和监测能力。...利用JFrog Xray和Snyk等工具,能够帮助我们尽早地发现开源依赖引入的安全漏洞,分析漏洞的扩散范围,也可以给出修复建议,实现安全隐患的自动消除。

    1.5K30

    Java中的基本数据类型和包装类型的这些知识,你都知道吗?

    Java中的基本数据类型和包装类型 Java 中的基本数据按类型可以分为四大类:布尔型、整数型、浮点型、字符型; 这四大类包含 8 种基本数据类型。...Character 和 int 的包装类 Integer之外, 其他基本数据类型的包装类只需要首字母大写即可。...包装类的作用和特点,本文下半部分详细讲解。 这些都是我们很熟悉的知识了,那下面的知识你有了解吗? 你可能不知道的知识点 首先我们来看一道题目?下面这段代码输出什么呢?...答案1 「number1」和「number2」均赋值为了127,「number3」和「number4」均赋值为了128, 那为什么「number1==number2」为「true」,「number3==...new Float(parseFloat(s)); } Float类型的valueOf的实现与Double类型类似。

    51320
    领券