NGRX和嵌套关系示例

时间:2018-10-16 15:31:58

标签: angular angular6 ngrx

有没有人举例说明将NGRX与深度超过1级的相关/嵌套数据一起使用?似乎只有使用ngrx的简单示例,而我还没有看到真实的示例?

我目前已将ngrx从我的项目中删除,因为似乎花了很长时间才能尝试在缺乏文档或没有多个表的示例的情况下达到高级水平,我已经尝试使用实体,但是速度变慢了开发,仍然不知道如何使用相关实体。 1级没问题,但多级似乎会使事情复杂化。

我希望看到一个具有多个表和关系的示例。似乎我已经用调度多个动作代替了forkJoin?有没有一种方法可以将多个操作分派为1个操作,例如加载任务,加载用户,加载合同?

我的结构如下:

Task
-TaskId
-Title
-AssignedToUser (User)
-Attachments (Array of Attachments)
-Comments (Array of Comments)
-Reviewers (Array of Users)
-Approvers (Array of Users)

Comment
-CommentId
-CommentText
-User (User)


User 
-UserId
-Name
-Contracts (Array of Contracts)
-Roles (array of Roles)


Contract
-ContractId
-ContractName

Role
-RoleId
-RoleName

来自Web api的数据是嵌套的json,所以我不确定如何进行转换,为此创建所有选择器,因此,如果有人有类似的示例将非常有帮助。我了解大多数NGRX,但对如何为所有这些构建选择器感到困惑。

3 个答案:

答案 0 :(得分:1)

经过一些研究和更多的挖掘,我认为我正在寻找像 Normalizr https://github.com/paularmstrong/normalizr这样的库,并在Redux上找到了一篇有关嵌套数据的文章:

https://redux.js.org/recipes/structuringreducers/normalizingstateshape

答案 1 :(得分:0)

因此,第一件事是您需要了解将所有内容都放入商店并不是一个好主意。这不是您的本地数据库。

互联网上有几篇文章讨论何时不使用商店,这可能有助于您获得一些见识。

其次,国家结构应该尽可能简单,否则,您很快就会遇到应对突变问题的麻烦,因为我确定您知道国家应该是不变的。如果您将State嵌套太多,那么每次您想在最深层更改一个小块时,都会很痛苦。

最后,我分享了我最近正在研究的项目中的State结构的一部分。对您没有太大帮助,但只想显示实际项目状态是什么样子。

enter image description here

答案 2 :(得分:0)

还有另一条路线

使用https://ngrx.io/guide/entity/adapter#adapter-collection-methods映射功能进行深度克隆。

return adapter.map(
  entity => entity.id == obj.id ? {...entity, foo: 'bar'} : entity, 
  state
);

或者您可以使用https://immerjs.github.io/immer/docs/introduction来处理

return adapter.map(
  entity => entity.id == obj.id ? produce(entity, (draft: any) => { draft.foo = 'bar' }) : entity, 
  state
);