How to shape state on NGRX for master-detail pattern

Question

Let's say I am developing a small app for managing tasks. The app uses angular and NGRX to manage the state. The user load the tasks every morning and go on different addresses to perform the tasks.

The app implements the master-detail pattern - I do one call to get the list of tasks (this list call brings only name and ID) and when the user clicks on a task from this list I do a heavy call to get the task by id and bring all the task data.

This is the interface for the task:

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

As I mentioned before, the list (getTaskList) http call only bring an array of id and name so I can compose the master view with the list of taks for today. The getTaskByID http call brings the entire enitty of task.

I have to keep all the loaded data on localStorage, so in case the app go offline the user still can click on a user and open it with the available data from localStorage.

This is required because maybe the user knows that he will not have internet on a specific location, so he needs to click on the task to "pre-fetch" this data, so latter on he can still click on that task, even without internet, and see the content.

I will use ngrx entityAdapters to manage the crud inside the reducer's.

With those requirements I am thinking if is better to have 2 reducers, one for list-view and one for details view or have only one reducer but make all properties of the interface (besides id and name) optional.

What is the best way to shape the reducer's for this scenario?

Answer 1

The most common way I have seen of doing this is to store the list and the detail object separately but in the same reducer.

I would also suggest that for the list items using an object which contains only the properties you need.

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