构建状态管理存储(ngrx/redux).是平面代表数据，还是嵌套代表视图? [英] Structuring state management store (ngrx/redux). Flat as representative of data, or nested as representative of view?
问题描述
我正在使用ngrx存储，以维护应用程序状态，通过normalizr来平坦化来自API调用和Immutable的数据.到目前为止，它的运行情况确实很好，但是我要了解一些更复杂的数据关系，并且我想知道如何继续构建商店.
I'm using ngrx store, to maintain application state, normalizr to flatten my data from API calls and Immutable. So far it's been working really well, but I'm getting to some more complex data relationships and I was wondering how to proceed with structuring the store.
为简化起见，我有两组对象.会议和发票.
To simplify things, I have two sets of objects. Sessions, and Invoices.
一个用户登录并可以查看其会话列表.存储区中的状态保存在对象ISessions中:
One user logs on and can view his list of Sessions. The state in the store is held in an object ISessions:
export interface ISessions extends Map<String, any> {
result: List<Number>;
entities: {
sessions: Map<Number, ISessions>,
clients: Map<Number, IClient>,
tutors: Map<Number, IProfile>
},
adding: boolean;
loading: boolean;
loadingFailed: boolean;
error: string;
}
(实体包含规范化的输出-客户端和家庭教师是会话中包含的嵌套类型)
(entities contain the normalized output - clients and tutors are the nested types contained in sessions)
这真的很好. reducer将其设置为加载，以便视图可以显示加载栏，然后填充数据，我可以在引用映射数据中的id的明智平整方式中使用它.
This works really well. The reducer sets it to loading so the view can display loading bars, then the data is populated I can use it in a sensible flat mannor referencing id's in the mapped data.
他们可以加载发票，这在IInvoices对象上非常相似:
They can load invoices, this works very similarly around an IInvoices object:
export interface IInvoices extends Map<String, any> {
result: List<Number>;
entities: {
invoices: Map<Number, IInvoice>,
clients: Map<Number, IClient>,
tutors: Map<Number, IProfile>
},
adding: boolean;
loading: boolean;
}
所以我的商店看起来像这样:
So my store looks like this:
export interface IAppState {
sessions: ISessions;
invoices: IInvoices;
}
但是，现在我谈到了更为复杂的关系.会话分配给发票.有几种前进的方式:
However, now I've come to the more complex relationship. The Sessions are assigned to Invoices. There's a few ways of going forward:
-
每个发票本身都可以具有ISessions对象.这似乎与使数据结构平坦的想法背道而驰.我可能还会有重复的会话，存储在AppState.sessions和AppState.invoices中.但是，由于IInvoice可以更直接地映射到视图状态(加载会话等存储在所有封装的Invoices ISessions对象中)，因此管理起来会更容易.
Each of the Invoices could themselves have an ISessions object. This seems to go against the idea of having the data structure flat. I'd also likely have repeat sessions, stored in the AppState.sessions and the AppState.invoices. However it would be easier to manage as the IInvoice more directly maps to the state of the view (loading the sessions etc is stored in the invoices ISessions object all encapsulated).
我可以将ISession与发票ID的映射存储在与ISession和发票分开的商店中:
I could store a map of ISessions to invoice IDs in a the store separately to the ISessions and invoices:
例如:
export interface IAppState {
sessions: ISessions;
invoices: IInvoices;
invoicesSessions: Map<number, ISessions>;
}
- 我可以将发票加载到现有的ISessions对象中.这意味着所有会话数据都位于同一位置，并且没有重复.一个问题是我现在很难将其映射到视图.每张发票都必须获取会话列表，并仅根据需要过滤.我必须开始跟踪ISessions对象中发票会话的加载.
还有一个问题，我是否应该存储两个单独的客户和导师列表，一个存储在ISessions中，一个存储在IInvoices中.像这样拆分商店是个坏主意吗?这意味着我的减速器必须全部在整个IAppState对象而不是子部分上进行操作.
There's also the question of whether I should be storing two separate lists of clients and tutors, one in ISessions and one in IInvoices. Is splitting the store like this a bad idea? This would mean my reducers would have to all operate on the whole IAppState object rather than the sub-sections.
基本上:当我收到数据时，应该将其剥离并编译大的ID索引列表，然后让视图几乎查询"它们所需的内容-基本上像数据库一样使用商店，或者我应该持有一个直接反映视图的深层对象集合-意味着数据经常在需要多次的地方重复出现?
Basically: When I get data in, should I be stripping it out and compiling big ID-indexed lists, letting the view's then almost 'query' what they need - basically using the store like a database OR should I be holding a deep-nested collection of objects that directly reflect views - meaning data is often repeated where it's needed multiple times?
推荐答案
是的，构造Redux存储的推荐方法是根据数据(而非视图)构建状态形状，而对关系数据的建议是保持所有规范化.使用选择器功能充当对该状态的查询.
Yes, the recommended approach for structuring your Redux store is to build your state shape in terms of your data, not your views, and the recommendation for relational data is to keep it all normalized. Use selector functions to act as queries into that state.
有关更多信息，请参见:
For more info, see:
- FAQ: Organizing relational data?
- Structuring Reducers - Normalizing State Shape
- React/Redux Links: Selectors and Normalization
此外，我的实用Redux"教程系列显示了如何使用Redux-在您的Redux状态下管理关系数据的ORM库:实用Redux-ORM基础和实用Redux，第2部分:Redux-ORM概念和技术.
Also, my "Practical Redux" tutorial series shows how to use the Redux-ORM library to manage relational data in your Redux state: Practical Redux-ORM Basics and Practical Redux, Part 2: Redux-ORM Concepts and Techniques.
这篇关于构建状态管理存储(ngrx/redux).是平面代表数据，还是嵌套代表视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
