redux 如何在NGRX上为主-细节图案形成状态

mftmpeh8  于 2023-03-12  发布在  其他
关注(0)|答案(1)|浏览(105)

比方说我在开发一个管理任务的小程序,程序使用angular和NGRX来管理状态,用户每天早上加载任务,去不同的地址执行任务。
应用程序实现了 master-detail 模式--我执行一次调用以获取任务列表(此列表调用仅带来nameID),当用户单击此列表中的任务时,我执行一次繁重的调用以按ID获取任务并带来所有任务数据。
这是任务的界面:

export interface TaskEntity {
  id: string | number; // Primary ID
  name: string;
  address: string;
  gps: string;
  creationDate: string;
  status: string;
  // And a bunch of other stuffs
}

正如我之前提到的,list (getTaskList) http调用只带来了一个idname的数组,所以我可以用今天的任务列表组成主视图。
我必须将所有加载的数据保存在localStorage上,因此,如果应用程序离线,用户仍然可以单击用户并使用localStorage中的可用数据打开它。
这是必需的,因为用户可能知道他在特定位置上没有互联网,所以他需要点击任务来“预取”该数据,以便稍后他仍然可以点击该任务,即使没有互联网,并看到内容。
我将使用ngrx entityAdapters来管理减速器内部的污垢。
根据这些要求,我认为最好有两个Reducer,一个用于列表视图,一个用于细节视图,或者只有一个Reducer,但使接口的所有属性(除了idname)都是可选的。
在这种情况下,最好的方法是什么来塑造减速器的形状?

bfhwhh0e

bfhwhh0e1#

我所见过的最常见的方法是将列表和细节对象分开存储在同一个简化器中。
我还建议对于列表项使用只包含所需属性的对象。

export interface TaskState {
  tasks: { id: string | number; name: string }[];
  selectedTask: TaskEntity;
}

相关问题