Блог

Я пытаюсь создать приложение с использованием ngrx. В качестве примера, предположим, что это приложение для управления проектами (например, Jira). В требованиях говорится, что он должен быть создан с использованием ngrx.

В этом приложении я определил следующие функции:

• Доска (список досок канбана)
• Управление проектами
• Управление проблемами
• Панель мониторинга (обзор всех функций / проектов / плат / настроек / других)

Итак, моя структура папок может выглядеть следующим образом:

 - board (feature module)
- core
- dashboard (feature module)
- issue (feature module)
- project (feature module)
- shared
- app.component.ts
- app-routing.module.ts
- app.module.ts
 

У меня также есть набор объектов (сохраненных с использованием модуля объектов ngrx). Эти объекты довольно очевидны: проекты, проблемы, платы.

С чем у меня возникли проблемы, так это с поиском наилучшего способа хранения объектов в моем хранилище, особенно потому, что они разделяются между моими разными модулями. Например:

• Приборной панели нужны объекты правления, проекта и выпуска.
• Плате нужны объекты board, project и issue.
• Проекту нужны объекты project и issue.
• Проблема нуждается в объектах проблемы.

Должны ли эти объекты храниться на уровне модуля функций или, скорее, на уровне корневого хранилища?

Если я сохраню их на уровне функций, это может выглядеть так:

 {
  "board": {
    "boardEntities": {
      "0" {
        "id": 0,
        "projectId": 1,
        "name": "My super board",
        "configuration": { ... }
      }
    }
  },
  "projects": {
    "projectEntities": {
      "1": {
        "id": 1,
        "name": "my project",
        "issueIds": [0, 1, 2, 3, 4], // all issues of this project
        "owner": "owner" 
      }
    }
  },
  "issues": {
    issueEntities: { 
      "0": {
        // ...
      }
    }
  }
}
 

Но тогда часть загрузки довольно неудобна. Например, когда моя панель мониторинга пытается отобразить проблемы, они могут быть еще не в моем состоянии. Я отправлю действие, подобное new fromDashboard.loadIssues() , и это действие будет поймано в результате, который приведет к загрузке проблем, но этот эффект присутствует в функции проблемы. Поскольку проблемы могут быть загружены практически из всех функций, мой эффект loadIssues (расположенный в папке issue feature ) должен будет прослушивать fromDashboard.loadIssues , fromProject.loadIssues и fromBoard.loadIssues .Это выглядит странно, потому что я не чувствую, что функция проблемы должна знать о панели управления / проекте / плате.

Другим способом было бы сохранить его на корневом уровне, например:

 {
  "entities": {
    "projectEntities": {
      // ...
    },
    "boardEntities": {
      // ...
    },
    "issueEntities": {
      // ...
    }
  },
  "board": {
    // ...
  },
  "projects": {
    // ...
  },
  "issues": {
    // ...
  }
}
 

Где в модуле будут расположены объекты, действия и редукторы core . Редукторам и эффектам все равно придется прослушивать несколько действий (например, fromDashboard.loadIssues, fromProject.loadIssues и fromBoard.loadIssues), но для меня здесь все в порядке, если ядро знает обо всех функциях (в конце концов, это ядро приложения).

Но это как-то не кажется правильным, или, по крайней мере, для меня это не похоже на стандартный способ ngrx сделать это, но я могу ошибаться.

Спасибо за любую помощь.

Из того, что я прочитал, сущности составляют все ваше приложение и необходимы в каждом модуле. В этом случае, я думаю, было бы разумно добавить их в корень.

Я написал небольшую статью на эту тему в разделе Обмен данными между модулями — это арахис.