首页
学习
活动
专区
工具
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

24810

angular4实战(4)ngrx

同react-redux 相似,ngrx核心也是通过reducer来获取储存在store中值(状态),通过action来改变store中值(状态)。...ngrxreact-redux本质没什么区别。 定义loadingactionreducer 在项目中创建ngrx文件夹,并在之下创建actionreducer文件。...关联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实用程序,

    12410

    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 更强大一些。

    78320

    Redux(二):组织reducer

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

    51230

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

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

    42.6K10

    Redux + Hooks 工程实践

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

    52510

    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 类型数据中存储数值代表是另外一块内存起始地址,就称这块内存代表着一个引用。

    70520

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

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

    61232

    react项目架构之路初探

    如果采用传统开发方式,mvc架构不明确,页面(view)逻辑层(controller)紧耦合,代码逻辑重复性工作较多,使用更改state方式 去渲染页面, 如果遇到组件之间传值,数据流通不明确...reduxsauce 传统开发中reducer中区分不同action 使用是switch case结构 针对每一个actiontype进行判断 使用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

    4. Navigation实战

    本来想写一个应用reduxNavigation实战,但是发现react-native有又新更新,新手怕误导大家,就直接用了别人组件,看看怎么应用吧。...修改原来index.ios.jsindex.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 ( <Router createReducer...总结 写不是那么详细,一边学习一边看吧,附上github地址,可预见错误: tabbaricon不显示,需要link,推荐安装rnpm然后rnpm link 一直红屏,修改代码无用或是诸如Login

    79920

    给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

    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类型类似。

    50220

    应用安全? ——用XraySynk保驾护航

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

    1.5K30

    同样做前端,为何差距越来越大?

    庆幸是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...如何组织 Store/Reducer?...reducer view 不必一一对应,应用中同时存在组件树状态树,按照各自需要去组织,通过 connect 来绑定状态树一个或多个分支到组件树; 通过构造一些预设数据类型来减少样板代码。...另外 iron-redux 能接收到 Pont 接口响应数据格式,并推导出整个 Redux 状态树静态类型定义,Store 中数据完美的类型提示。效果如下: ?...总结 以上5点当然不是我们技术全部。除此之外我们还实践了移动端开发、可视化图表/WebGL、Web Worker、GraphQL、性能优化等等,但这些还停留在术层面,未来到一定程度会拿出来分享。

    1.2K20
    领券