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

ngrx forms 8 reducer不更新状态

ngrx forms是一个用于处理表单状态管理的库,它是基于Redux和Angular的。它提供了一种简单而强大的方式来管理表单的状态和验证。

在ngrx forms中,reducer是一个纯函数,用于处理表单状态的更新。它接收当前的表单状态和一个action作为参数,并返回一个新的表单状态。reducer负责根据action的类型来更新表单状态。

然而,有时候在使用ngrx forms时可能会遇到reducer不更新状态的问题。这可能是由于以下几个原因导致的:

  1. 错误的action类型:确保你在dispatch action时使用了正确的action类型。如果action类型不匹配,reducer将不会执行相应的更新操作。
  2. 不正确的state更新:在reducer中,确保你正确地更新了表单状态的相关属性。可能是你忽略了某个属性的更新,导致状态没有正确地更新。
  3. 异步操作:如果你在reducer中执行了异步操作,例如调用API或进行网络请求,这是不被允许的。reducer应该是一个纯函数,只处理同步操作。如果需要进行异步操作,应该在组件中使用Effect来处理。
  4. 表单状态的不可变性:ngrx forms鼓励使用不可变的数据结构来管理表单状态。确保你在reducer中使用了不可变的方式更新表单状态,而不是直接修改原始状态。

如果你遇到了ngrx forms reducer不更新状态的问题,可以按照以下步骤进行排查:

  1. 检查action类型是否正确,确保你在dispatch action时使用了正确的类型。
  2. 检查reducer中的状态更新逻辑,确保你正确地更新了表单状态的相关属性。
  3. 确保reducer中没有执行异步操作,如果有需要进行异步操作,应该在组件中使用Effect来处理。
  4. 确保在reducer中使用了不可变的方式更新表单状态。

总结起来,ngrx forms的reducer不更新状态可能是由于错误的action类型、不正确的状态更新、异步操作或不可变性等原因导致的。通过仔细检查和排查,可以解决这个问题并正确地更新表单状态。

关于ngrx forms的更多信息和使用示例,你可以参考腾讯云的相关文档和示例代码:

腾讯云ngrx forms相关产品和产品介绍链接地址:ngrx forms

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

相关·内容

Angular 接入 NGRX 状态管理

注:图片来自ngrx.io/guide/store NGRX 是 Angular 实现响应式状态管理的应用框架。...NGRX 状态管理生命周期图中包含了以下元素: Store:集中的状态存储; Action:根据用户所触的不同事件执行不同的 Action ; Reducer:根据不同的 Action 对 Store...NGRX 状态管理中包含了两条变更状态的主线: 同步变更状态:用户 => Action => Reducer => Store(State); 异步变更状态:用户 => Action => Effects...(仅存储一位用户); 创建根据 Action 来更新状态Reducer: 选项介绍: 选项 作用 --reducers 执行reducers存放路径,约定路径为上一级的 index.ts,也是 store...[] : []; 添加核心更改状态的代码到 app/store/reducers/user.reducer.ts : import { createReducer, on } from '@ngrx/store

18810

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

Angular CLI告诉我们它app.module.ts为我们更新了。...但是,尽管代替Observable的承诺将只运行一次并在此之后处理,但只要流正在更新并且我们取消订阅,Observable就会持续运行。...反应角 - Ngrx 让我们来谈谈我们的应用程序状态,我的意思是我们的应用程序的所有属性,它们的字面定义其当前的行为和状态。...State是一个单一的,不可变的数据结构 - 至少Ngrx为我们实现它的方式。Ngrx是由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。...什么是NgRXNgRX是一种管理应用程序状态的模式。这是一个支持Angular应用程序的RxJS驱动的状态管理库。

42.5K10

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

庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。.../SUCCESS/ERROR 这 3 个action,我们通过 FetchTypes 类型来自动生成对应到 3 个 action 如何组织 Store/Reducer?...reducer 和 view 不必一一对应,应用中同时存在组件树和状态树,按照各自需要去组织,通过 connect 来绑定状态树的一个或多个分支到组件树 通过构造一些预设数据类型来减少样板代码。...Pont 实现的效果有: 根据方法名自动匹配 url、method,并且对应到 prams、response 类型完美,并能自动提示 后端 API 接口变更后,前端相关联的请求会自动报错,再也担心后端悄悄改接口前端不知晓...依赖管理彻底。借助 webpack 的 css-loader,已够用。 JS 和 CSS 变量共享。

99610

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

庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...如何组织 Store/Reducer?...reducer 和 view 不必一一对应,应用中同时存在组件树和状态树,按照各自需要去组织,通过 connect 来绑定状态树的一个或多个分支到组件树; 通过构造一些预设数据类型来减少样板代码。...依赖管理彻底。借助 webpack 的 css-loader,已够用。 JS 和 CSS 变量共享。关于 JS 和 Sass/Less 变量共享,我们摸索出了自己的解法: ?...它同样具有 TS 的类型完美,非常强大的文案提示,另外还有: VS Code 插件 kiwi linter【8】,自动对中文文案标红,如果已有翻译文案能自动完成替换; Shell 命令全量检查出没有翻译的文案

1.2K20

写在 2021: 值得关注学习的前端框架和工具库

IceStore[3],淘系Ice团队出品的状态管理库,我在日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects...它对自己的定义也包含状态管理的字样,而是有穷状态机( finite state machines[5] )。暂时没有使用过,不做展开介绍。...SWR[6]、React-Query[7]、useRequest[8],网络请求的状态管理、缓存、竞态处理等。 生态 GatsbyJS[9],基于React的静态页面生成器,非常快。...你可能听过它不好的一面:笨重、学习成本高、断崖式更新..., 可能也听过它好的一面:不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手...。...NgRx[93],很好用的Angular的状态管理方案,写法和Redux非常像,也是action >>> reducer >>> state,所以几乎可以没有什么成本的上手。

4.2K10

Angular 2 + 折腾记 :(3)初步了解服务及使用

前言 探究高深理论,只探究实际使用,有更好的写法或者经验请指出; 有些暂时没涉及到的知识我可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理的地方; Angular2...nginx做反向代理所以走baseurl import { environment } from '../../../.....router'; // 表单模块,及响应式表单模块 -- 内置 import { FormsModule, ReactiveFormsModule } from '@angular/forms...fadeIn], providers: [vehicleFaultService, EventsService] })复制代码 ---- 总结 服务若是结合@Inpu(),@Output()..感觉不需要ngrx...这种状态管理 服务可以贯穿全局(全局注入),事件广播这些都可以实现 服务不应该太重(比如处理一些复杂的逻辑),一个服务内部应该清晰,简洁。。

1.6K20

写在2021: 值得关注学习的前端框架和工具库

IceStore,淘系Ice团队出品的状态管理库,我在日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects...它对自己的定义也包含状态管理的字样,而是有穷状态机( finite state machines )。暂时没有使用过,不做展开介绍。...你可能听过它不好的一面:笨重、学习成本高、断崖式更新…, 可能也听过它好的一面:不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手…。...也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。...NgRx,很好用的Angular的状态管理方案,写法和Redux非常像,也是action >>> reducer >>> state,所以几乎可以没有什么成本的上手。

2.8K10

MobX

比如UI,数据序列化,服务通信 也就是说,只要知道哪些东西是状态相关的(源于应用状态),在状态发生变化时,就应该自动完成状态相关的所有事情,自动更新UI,自动缓存数据,自动通知server 这种理念看似新奇...todo.finished} />{todo.title} ) (完整示例见React components) 不用为了改状态去定义action(甚至为了定义状态去添reducer...比如原型 而MobX对state的结构及类型都没有什么限制,MobX里state的定义是: Graphs of objects, arrays, primitives, references that forms...想象一下给一个复杂的老项目上Redux,至少需要: 把共享状态都提出来,作为state 把对应的操作也都提出来,作为reducer和saga,并保证reducer结构与state一致 定义action,...UI更新关联起来 把组件状态暴露出去,接入DevTools 内置shouldComponentUpdate优化 react-redux通过setState({})来触发Container更新,而mobx-react

1.1K20

React核心 -- React-Hooks

,有自己独立的上下文,不会出现混淆状态的情况 让函数有了状态管理 解决了 组件树直观、类组件难维护、逻辑不易复用的问题 避免函数重复执行的副作用 应用场景 利用 hooks 取代生命周期函数...让组件有了状态 组件辅助函数 处理发送请求 存取数据 做好性能优化 hooks API 从 react 中引入 1. useState 给函数组件添加状态 初始化以及更新组件状态 const [count...之后 useLayoutEffect 执行时机在 DOM 更新之后 4. useMemo 作用:让组件中的函数跟随状态更新 注意:优化函数组件中的功能函数 为了避免由于其他状态更新导致的当前函数的被迫执行...) 相当于 useCallback(fn, deps) 不同点: useCallback 返回的是一个函数,不再是值 useCallback 缓存的是一个函数,useMemo 缓存的是一个值,如果依赖更新...,返回的永远是缓存的那个函数 给子组件中传递 props 的时候,如果当前组件更新,不会触发子组件的重新渲染 6. useRef 作用:长久保存数据 注意事项: 返回一个子元素索引,这个索引在整个生命周期中保持不变

1.3K10

React核心 -- React-Hooks

,有自己独立的上下文,不会出现混淆状态的情况 让函数有了状态管理 解决了 组件树直观、类组件难维护、逻辑不易复用的问题 避免函数重复执行的副作用 应用场景 利用 hooks 取代生命周期函数...让组件有了状态 组件辅助函数 处理发送请求 存取数据 做好性能优化 hooks API 从 react 中引入 1. useState 给函数组件添加状态 初始化以及更新组件状态 const [count...之后 useLayoutEffect 执行时机在 DOM 更新之后 4. useMemo 作用:让组件中的函数跟随状态更新 注意:优化函数组件中的功能函数 为了避免由于其他状态更新导致的当前函数的被迫执行...) 相当于 useCallback(fn, deps) 不同点: useCallback 返回的是一个函数,不再是值 useCallback 缓存的是一个函数,useMemo 缓存的是一个值,如果依赖更新...,返回的永远是缓存的那个函数 给子组件中传递 props 的时候,如果当前组件更新,不会触发子组件的重新渲染 6. useRef 作用:长久保存数据 注意事项: 返回一个子元素索引,这个索引在整个生命周期中保持不变

1.2K20

Redux

一个变化(用户输入或者内部接口调用)可能会影响应用的多处状态,例如双向数据绑定,很难维护调试 一个model可以更新另一个model的话,一个view更新一个model,这个model更新了另一个model...(与Flux类似),流向相应子树 store负责协调,先把action和当前state传递给reducer树,得到新state,更新当前state,再通知视图更新(React的话就是setState()...一些中间件(redux-thunk、redux-promise等等)只是让异步控制形式上更优雅,从dispatch action角度看没有区别 reducer 负责具体的状态更新(根据action更新state...每次都返回新的,维护(修改)输入的state 所以能随便调整reducer执行顺序,放电影一样的调试控制得以实现 六.react-redux Redux与React没有任何关系,Redux作为状态管理层可以配合任何...,但不允许修改现有的) 不作为强约束是考虑某些性能场景,技术上可以通过写不纯的reducer来解决 如果reducer不纯的话,依赖纯函数组合特性的强大调试功能会被破坏,所以强烈建议这么做 不强制state

1.3K40
领券