如何使用Angular-redux store

时间:2017-07-28 08:34:00

标签: angular redux rxjs observable

上下文

我使用angular-redux store的动作,史诗,缩减器使用基本商店生态系统。

快速总结: little graph of my store

我的州

state
|_ accounts
  |_ items
  |_ paginations
  |_ loading
  |_ errors
|_ applications
  |_ items
  |_ paginations
  |_ loading
  |_ errors

所以我的组件在创建条目上调用相应的操作。 (我删除了非必要的代码)  

export class ApplicationNewComponent  implements OnInit {

  private application;

  constructor(private collection: CollectionActions) {}

  onSubmit() {
    this.collection.createEntry(COLLECTION_TYPES.APPLICATION, {}, this.application);
    };
}

行动CollectionActions dispatchreducer检查state上是否有任何操作。 epics接收操作,在需要时调用服务API之前执行所有必需的检查,然后根据答案调用相应的操作,reducer将执行操作,更新状态。 对于redux用户来说,没什么新东西。

从我的ApplicationListComponent开始,我只订阅了我的ApplicationDetailComponent订阅了此列表中特定项目的ApplicationNewComponent等应用程序。

问题

我的问题是,应该创建条目的import random number = str(random.randint(1, 10000000)) comma_placement = 4 print('The original number is: {}. '.format(number)) while True: if len(number) % 3 == 0: for i in range(0, len(number) // 3 - 1): number = number[0:len(number) - comma_placement + 1] + ',' + number[len(number) - comma_placement + 1:] comma_placement = comma_placement + 4 else: for i in range(0, len(number) // 3): number = number[0:len(number) - comma_placement + 1] + ',' + number[len(number) - comma_placement + 1:] break print('The new and improved number is: {}'.format(number)) ,我不知道如何以干净的方式只检索新条目。

根据我当前的商店行为并且没有观看整个集合来比较前一个和新状态,我不知道如何通知我的ApplicationNewComponent该条目已创建且ID为14。 (例如)

我实际看到解决问题的最简单方法是在状态中添加一个新密钥,称为' lastCreatedEntry',使用reducer填充API部分答案并订阅在我的组件中。

有没有办法只从商店外检索状态差异?

有没有办法观察动作流而不是状态?

这种情况已经有了什么东西吗?

非常欢迎任何建议/帮助。 我可能在很多方面都错了,请原谅我可怜的英语。

1 个答案:

答案 0 :(得分:1)

我不会使用angular-redux而是使用ngrx,但我相信原则应该是相同的。在您的组件中,您可能订阅了保留集合的商店部分。不一定是整个,因为在一般情况下,它可能是一个PagedCollection,而你新创建的那个不在显示的当前页面之内。

您没有指定,您的组件实际上做了什么?它是显示集合还是要显示上次创建的实体的更新屏幕?或

现在,您的流量实际上取决于您的特定组件和需求。当你说你需要 ID来做一些其他的电话时,这究竟意味着什么?这些调用是否必须从组件中完成,或者它们是否更适合史诗,例如?

如果它,例如,更新实体屏幕你要显示的那个,那么你将设置你的组件路线像component/{entityId},你将使用epic从服务器获得的entityId从你的史诗重定向到那条路线

正如您所看到的,它高度依赖于您希望在组件和用户体验流程中执行的操作。

<强> [UPDATE] 关于史诗和愚蠢控制之间的直接交流......这正是你不想要的。通常的设置是这样的:

  1. 您有CreateComponent
  2. 用户完成输入并提交后,您发送一个动作,史诗拾取,触发service.createNewRequest(),返回newlyCreatedId
  3. 您的史诗现在知道该服务返回的您的newlyCreatedId,它确实是router.navigate(&#39; applicationDetailsComponent / newlyCreatedId&#39;)
  4. 你有自己的applicationDetailsComponent(当然,智能和愚蠢)和为它定义的路由(路由定义包括{id})
  5. 你有一个使用canActivate的警卫为该路线而在守卫中你发射一个新的请求service.getApplicationById(id)
  6. 该操作的完成由reducer接收,它更新名为“selectedApplication&#39;
  7. ”的商店的一部分
  8. 您的applicationDetailsComponent订阅了`selectedApplication&#39;商店的一部分
  9. 您可以从商店中已有的集合中选择实体,而不是在5中触发请求。但由于分页集合,这不是一个好主意。如果您有分页集合(存储在商店中)并且您新创建的实体不在当前页面中,那么您就遇到了问题。所以最好还是单独请求。

    [更新2] 如果你想在同一个组件中同时拥有(创建/编辑),那么你将拥有名为selectedEntity的商店的一部分并用最后创建的商店填充它。我故意将它命名为selectedEntity因为它在服务器上创建的时刻,而不是addNewComponent,而是editComponent。在那一个你会订阅商店的selectedEntity部分。但是,您可能会产生混淆,因为如果您路由到该组件,您必须以某种方式标记它在createNew模式下(尚未保存)或者是否处于编辑模式(创建的内容和您看现有的实体)。