实现数组和选择存储的正确方法

Question

上下文

我有一个基本的应用程序，它从实时数据库（firestore）获取数据并将其显示给用户以让他与之交互。

所有内容的基本模型都称为List，用户可以创建它们，删除它们，获取它们的列表和公共列表。

我为每个案例都实施了火焰库查询（因为获取应用程序的所有列表然后过滤显然是一个糟糕的选择）。

问题

我不知道如何使用这3种类型的数据正确处理状态，因为我需要存储用户创建的列表，公共列表然后我需要有一个视图，您可以在其中查看列表并与之交互（基本上是用户完成的一组更新）。

问题在于，如果我实施基本商店，它将管理List[]，然后我将使用Array.find()根据其ID（随机字符串）获取所需的列表。这感觉非常糟糕，我确信有更好的办法来处理这样的事情。

由于我见过的每个教程都太复杂了（ngrx / example-app对初学者来说太复杂了）或者他们不讨论这个案例，我不知道在哪里去吧。

当前状态

一切都非常简单，可以在应用程序的github repo上看到：

https://github.com/Supamiu/ffxiv-teamcraft/tree/ngrx/src/app/core/ngrx/list

当前减速机：

// Define state
export interface ListsState {
    loading: boolean; // indicates loading while fetching data
    lists: List[];
}

// Define initial state
const initialState: ListsState = {
    loading: false,
    lists: []
};

// reducer function
export function listReducer(state = initialState,
                            action: ListActions.All): ListsState {
    switch (action.type) {
        case ListActions.FETCH_USER_LISTS: {
            return {
                ...state,
                loading: true
            }
        }
        case ListActions.FETCH_USER_LISTS_SUCCESS: {
            return {
                lists: action.payload,
                loading: false
            }
        }
        case ListActions.DELETE_LIST: {
            state.lists = state.lists.filter(l => l.$key !== action.payload);
            return {
                ...state,
                loading: false
            }
        }
        case ListActions.ADD_LIST: {
            return {
                ...state,
                loading: true
            }
        }
        case ListActions.ADD_LIST_SUCCESS: {
            state.lists.push(action.payload);
            return {
                ...state,
                loading: false
            }
        }
        case SAVE_LIST: {
            const listIndex = state.lists.map(list => list.$key).indexOf(action.payload.$key);
            state.lists[listIndex] = action.payload;
            return {
                ...state,
                loading: false
            }
        }
        default: {
            return state
        }
    }
}