问题标签 [ngrx]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 如何为具有列表/详细视图和分页的应用程序选择 Redux 状态形状?
想象一下,我的数据库中有许多条目(例如,用户)。我还有两条路线,一条用于列表,另一条用于详细信息(您可以在其中编辑条目)。现在我正在努力解决如何处理数据结构。
我正在考虑两种方法以及两者的结合。
共享数据集
- 我导航到
/list
,我所有的用户都是从存储在 redux 商店中的 api 下载的,在 key 下users
,我还添加了一些users_offset
和users_limit
只呈现列表的一部分 - 然后我导航到
/detail/<id>
,并存储currently_selected_user
为<id>
val ... 这意味着我将能够使用类似这样的东西获取用户的数据users.find(res => res.id === currently_selected_user)
- 更新也很简单,因为我只使用一个数据集和指向它的细节
- 添加新用户也很容易,同样只需使用相同的用户列表
现在我对这种方法的问题是,当用户列表变得庞大(比如数百万)时,下载可能需要一段时间。而且,当我直接导航到 时/detail/<id>
,我还没有下载所有用户,所以要获取我需要的数据,我必须先下载整个内容。数以百万计的用户只是为了编辑一个。
分离的数据集
- 我导航到
/list
,而不是从 api 下载我的所有用户,我只下载其中几个,具体取决于我的users_per_page
和users_current_page
将设置的内容,我可能会将数据存储为users_currently_visible
- 然后我导航到
/detail/<id>
,存储currently_selected_user
为<id>
val ......而不是搜索,users_currently_visible
我只是从 api 下载用户的数据 .. - 在更新时,我不会
users_currently_visible
以任何方式更新 - 我也不会添加
我在这里看到的可能问题是,我必须在访问/list
时再次从 api 下载数据,因为它可能与数据库中的内容不同步,我也可能不必要地详细下载用户数据,因为它们可能已经在我的体内users_currently_visible
某种科学怪人的恶作剧
- 我详细说明,我在分离数据集中执行相同的操作,但不是直接从 api 下载用户数据,而是首先检查:
- 我有吗
users_currently_visible
- 如果是这样,他们之间是否有使用我的 ID 的用户?如果两者都为真,则我将其用作我的用户数据,否则我进行 api 调用
- 我有吗
- 更新时也会发生同样的情况,我检查我的用户是否存在,
users_currently_visible
如果存在,我也会更新该列表,如果不存在,我什么也不做
这可能会起作用,但并不觉得这是正确的方法。我可能还需要users_currently_visible
在访问时下载新的列表/list
,因为我可能已经添加了一个新列表。
有没有粉丝最喜欢的方法?...我敢肯定每个 redux 用户都遇到过同样的事情。
谢谢!
typescript - Typescript、@ngrx 和默认存储值
我想我在尝试使用@ngrx时遗漏了一些明显的东西。我正在尝试使用嵌套的减速器,并希望能够返回默认的起始子值。这是我的孩子
我的问题是如何使用它来初始化一个额外的计数器。我的 counters.ts 看起来像
这可行,但我在计数器上有一个打字稿错误:Supplied parameters do not match any signature of call target
我想知道如何解决这个问题。
我正在使用@ngrx,它提供了这个:
angular - 如何使用 ngrx redux 和 angular2 显示来自简单对象的属性
我将 angular2 2.0.0-beta.2 与 ngrx 商店https://github.com/ngrx/store一起使用,并使用 ngrx/store github 页面上的“计数器”示例的修改版本实现了一个简单的应用程序。
在我的应用程序中,我有一个“用户”对象,其中包含两个用于login和logout的按钮。我也有相应的减速器函数login和logout,我可以使用包含 name 属性的对象或空对象返回状态...
这不会更新:
...当我单击登录按钮时它仍然是空白的,但是当通过“json”管道传输时,我看到对象确实已经改变了......
这确实更新
...输出{ "name": "jdoe" }但显然这对我没有好处。简单地使用 {{ user.name | async }} 不起作用并保持空白。
模板:
这是 plunker: http ://plnkr.co/edit/cPubI9upph344qrOqtj8?p=preview
angular - Angular2 + ngrx/store 用于处理失败的 HTTP 请求
我想要一个简单的代码路径来创建和调度 HTTP 操作。我想做的是:
这样,成功和失败响应都将转换为 JSON,然后根据成功/失败标准分配正确的缩减类型,以便可以正确操作存储。(想想用户登录成功和失败返回 200 或 401)。
有没有更清洁或更好的方法来处理这个问题?当前的 2nd.catch
表现不佳,因为它没有返回 observable。
欢迎提出建议或其他解决方案?
angular - Observable/Subject 延迟/节流问题(ngIf 和异步)
我正在使用,@ngrx/store
并且在请求开始或返回错误时显示通知,如果请求成功则将其隐藏。它按预期工作,我想延迟初始通知,因此如果请求很快结束,它不会显示。我尝试了几个与时间相关的 Observable/Subject 运算符:
- 使用
delay
和bufferTime
消息会null
导致错误<notification>
- 使用
debounceTime
不显示初始消息,但响应缓慢且错误消息仍然存在null
throttleTime
仅显示初始通知并以缓慢的响应隐藏它
如果没有这些*ngIf="(notification |async)"
,它的工作和消息只有在没有通知的情况下才会设置null
。
我想我可以<notification>
用 CSS 转换延迟来隐藏,但我想知道是否有人知道其他方法来解决这个问题......
javascript - RXJS 可观察多次评估?
我在 Angular2 应用程序中使用 NGRX 和 RxJS。当使用尝试保存记录更新时,我会生成一个操作“更新”,我想调用 API 来更新数据库。
问题是“.filter (action => action.type==UPDATE)”之后的所有内容都被调用了 4 次。
我不明白为什么。我尝试了很多东西并更改了代码,但问题仍然存在...
我的代码:
要实时查看问题:
https://plnkr.co/edit/zq4AsKJYILfrgItDNbHo?p=preview
在主面板中选择一名员工。在详细信息面板中,单击保存按钮。您将在控制台中看到 API 被调用了 4 次:
谢谢您的帮助 !!
angular - Angular2重定向到启动时的路由
我正在使用@ngrx/store
和 observables。我有一个用户化简器,它设置有关用户的信息,包括用户的 JWT。
ANavigationService
被注入到AppComponent
订阅user
模型的根中,并将根据用户令牌的存在进行路由。AUserService
读取本地存储并将user
结果分派给reducer。
问题是,当我尝试使用以下命令路由到主页时goToLogin()
,出现以下错误......这并没有提供太多信息。
我猜还没有设置路由组件。有没有办法在路由之前等待应用程序加载?或者下面的错误是否表明不同的问题?
angular - Angular2 ngrx/store with multiple login attempts
In looking through a couple of ngrx examples (https://github.com/SekibOmazic/ngrx-auth-example) and (https://github.com/ngrx/angular2-store-example) they both create a subscription to the store, and then make REST API calls.
I've modified both of their code to return errors and yet the subscriptions remain in tact (e.g. returning a 404 when trying to login). I can see the error in the console yet I can login again.
In my code, I have a nearly identical setup, yet a failed login response kills my subscription (as near as I can tell).
What magic do I need in order for a 4XX error response codes to not kill my subscription?
angular - 如何使用 @ngrx/store 获取 State 对象的当前值?
我的服务类,在调用 Web 服务之前,需要dataForUpdate
从我的状态中调用一个属性。目前,我正在这样做:
我使用 angular2-store-example ( https://github.com/ngrx/angular2-store-example/blob/master/src/app/users/models/users.ts ) 作为指导。
我想知道是否存在更好(更清洁)的方式?
filter - 在哪里过滤状态?
新手问题:我有一个使用 ngrx 的 angular2 应用程序,我有一个将状态(可观察数组)返回给组件的服务。
我的问题是,如果我想在组件中使用它的只读子集,我应该在哪里过滤状态?
我是在减速器、服务或组件中执行此操作吗?