Skip to content

refactor: ngrx

This PR is meant to refactor and more specifically, reorganize primarily the state layer of the application. A few things to note is that all of NGRX is now within a state folder, also I did take some liberties which can be undone if not preferred.

NGRX:

The NGRX feature structure is largely base on best practices from NRWL without using the "Feature Workflow" where it requires a separate Module per feature, we just use the StateModule to declare our effects.

I created a new folder structure that is divided up by feature. Everything under the state folder now has each feature folder nested under it. Also, to not create a lot of "file clutter," each feature folder also has a tests folder where all unit tests will be placed.

The app "feature," contains all of state used throughout the application such as dialogs, snackbars, features, etc. I am wondering if we should rename this feature to something like shared or common?

I would suggest creating more actions based on where they were triggered. Good video here.

[state]
 --index.ts // RootState, reducers, metareducers
 --state.module.ts
|--app
|--event
   |--tests
    --event.actions.ts // only actions
    --event.effects.ts // all effects or any custom logic used by the effect (not all features contain effects).
    --event.selectors.ts // selectors, not including simple state selectors
    --event.state.ts // state interface, initial state, reducer, simple state selectors.
    --event.facade.ts // dispatching and selecting.
|--map
|--search
|--settings
|--ui

The changes above removed the need for a separate facades folder.

APP:

The biggest liberty taken is reorganizing imports. They are now alphabetized and separated by "angular" imports, then third party imports, and local imports below that. Not super important, but I do find it helps to know what exactly you are using and from where.

I also noticed we had an interfaces folder and a models folder alongside that. I went ahead and combined everything into the models folder.

I touched up on the AppModule as well, separating all material modules into its own module. now all the imports are organized by "Angular" imports on top, all modules below that, then components, and pipes/services, below all other imports.

Images: image image image

Edited by Victor Avila

Merge request reports