问题标签 [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.

0 投票
2 回答
14176 浏览

javascript - 如何为具有列表/详细视图和分页的应用程序选择 Redux 状态形状?

想象一下,我的数据库中有许多条目(例如,用户)。我还有两条路线,一条用于列表,另一条用于详细信息(您可以在其中编辑条目)。现在我正在努力解决如何处理数据结构。

我正在考虑两种方法以及两者的结合。

共享数据集

  • 我导航到/list,我所有的用户都是从存储在 redux 商店中的 api 下载的,在 key 下users,我还添加了一些 users_offsetusers_limit只呈现列表的一部分
  • 然后我导航到/detail/<id>,并存储currently_selected_user<id>val ... 这意味着我将能够使用类似这样的东西获取用户的数据users.find(res => res.id === currently_selected_user)
  • 更新也很简单,因为我只使用一个数据集和指向它的细节
  • 添加新用户也很容易,同样只需使用相同的用户列表

现在我对这种方法的问题是,当用户列表变得庞大(比如数百万)时,下载可能需要一段时间。而且,当我直接导航到 时/detail/<id>,我还没有下载所有用户,所以要获取我需要的数据,我必须先下载整个内容。数以百万计的用户只是为了编辑一个。

分离的数据集

  • 我导航到/list,而不是从 api 下载我的所有用户,我只下载其中几个,具体取决于我的users_per_pageusers_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 用户都遇到过同样的事情。

谢谢!

0 投票
2 回答
1392 浏览

typescript - Typescript、@ngrx 和默认存储值

我想我在尝试使用@ngrx时遗漏了一些明显的东西。我正在尝试使用嵌套的减速器,并希望能够返回默认的起始子值。这是我的孩子

我的问题是如何使用它来初始化一个额外的计数器。我的 counters.ts 看起来像

这可行,但我在计数器上有一个打字稿错误:Supplied parameters do not match any signature of call target我想知道如何解决这个问题。

我正在使用@ngrx,它提供了这个:

0 投票
2 回答
1289 浏览

angular - 如何使用 ngrx redux 和 angular2 显示来自简单对象的属性

我将 angular2 2.0.0-beta.2 与 ngrx 商店https://github.com/ngrx/store一起使用,并使用 ngrx/store github 页面上的“计数器”示例的修改版本实现了一个简单的应用程序。

在我的应用程序中,我有一个“用户”对象,其中包含两个用于loginlogout的按钮。我也有相应的减速器函数loginlogout,我可以使用包含 name 属性的对象或空对象返回状态...

这不会更新:

...当我单击登录按钮时它仍然是空白的,但是当通过“json”管道传输时,我看到对象确实已经改变了......

这确实更新

...输出{ "name": "jdoe" }但显然这对我没有好处。简单地使用 {{ user.name | async }} 不起作用并保持空白。

模板:

这是 plunker: http ://plnkr.co/edit/cPubI9upph344qrOqtj8?p=preview

0 投票
2 回答
7435 浏览

angular - Angular2 + ngrx/store 用于处理失败的 HTTP 请求

我想要一个简单的代码路径来创建和调度 HTTP 操作。我想做的是:

这样,成功和失败响应都将转换为 JSON,然后根据成功/失败标准分配正确的缩减类型,以便可以正确操作存储。(想想用户登录成功和失败返回 200 或 401)。

有没有更清洁或更好的方法来处理这个问题?当前的 2nd.catch表现不佳,因为它没有返回 observable。

欢迎提出建议或其他解决方案?

0 投票
2 回答
3178 浏览

angular - Observable/Subject 延迟/节流问题(ngIf 和异步)

我正在使用,@ngrx/store并且在请求开始或返回错误时显示通知,如果请求成功则将其隐藏。它按预期工作,我想延迟初始通知,因此如果请求很快结束,它不会显示。我尝试了几个与时间相关的 Observable/Subject 运算符:

  • 使用delaybufferTime 消息null导致错误 <notification>
  • 使用debounceTime不显示初始消息,但响应缓慢且错误消息仍然存在null
  • throttleTime仅显示初始通知并以缓慢的响应隐藏它

如果没有这些*ngIf="(notification |async)",它的工作和消息只有在没有通知的情况下才会设置null

我想我可以<notification>用 CSS 转换延迟来隐藏,但我想知道是否有人知道其他方法来解决这个问题......

0 投票
1 回答
1549 浏览

javascript - RXJS 可观察多次评估?

我在 Angular2 应用程序中使用 NGRX 和 RxJS。当使用尝试保存记录更新时,我会生成一个操作“更新”,我想调用 API 来更新数据库。

问题是“.filter (action => action.type==UPDATE)”之后的所有内容都被调用了 4 次。

我不明白为什么。我尝试了很多东西并更改了代码,但问题仍然存在...

我的代码:

要实时查看问题:

https://plnkr.co/edit/zq4AsKJYILfrgItDNbHo?p=preview

在主面板中选择一名员工。在详细信息面板中,单击保存按钮。您将在控制台中看到 API 被调用了 4 次:

谢谢您的帮助 !!

0 投票
1 回答
718 浏览

angular - Angular2重定向到启动时的路由

我正在使用@ngrx/store和 observables。我有一个用户化简器,它设置有关用户的信息,包括用户的 JWT。

ANavigationService被注入到AppComponent订阅user模型的根中,并将根据用户令牌的存在进行路由。AUserService读取本地存储并将user结果分派给reducer。

问题是,当我尝试使用以下命令路由到主页时goToLogin(),出现以下错误......这并没有提供太多信息。

我猜还没有设置路由组件。有没有办法在路由之前等待应用程序加载?或者下面的错误是否表明不同的问题?

0 投票
1 回答
1714 浏览

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?

0 投票
11 回答
104758 浏览

angular - 如何使用 @ngrx/store 获取 State 对象的当前值?

我的服务类,在调用 Web 服务之前,需要dataForUpdate从我的状态中调用一个属性。目前,我正在这样做:

我使用 angular2-store-example ( https://github.com/ngrx/angular2-store-example/blob/master/src/app/users/models/users.ts ) 作为指导。

我想知道是否存在更好(更清洁)的方式?

现场示例:https ://plnkr.co/edit/WRPfMzPolQsYNGzBUS1g?p=preview

0 投票
1 回答
1332 浏览

filter - 在哪里过滤状态?

新手问题:我有一个使用 ngrx 的 angular2 应用程序,我有一个将状态(可观察数组)返回给组件的服务。

我的问题是,如果我想在组件中使用它的只读子集,我应该在哪里过滤状态?

我是在减速器、服务或组件中执行此操作吗?