NgRx

If your application needs a complex state management solution, you can use NgRx. NgRx follows the Redux pattern: an industry standard for handling stateful content in frontend applications.

warning

Make sure your application really needs a complex store solution. In smaller applications, the same result can be reached by simply using services or other plugins.

Use the store, or component store, for managing your application or component state.

Use a feature based folder structure

Group NgRx code per feature, not per (file) type. In most cases, you would have a structure similar to this:

├── src
│   ├── store
│   │   ├── feature-a
│   │   |   ├── feature-a.actions.ts
│   │   |   ├── feature-a.effects.ts
│   │   |   ├── feature-a.facade.ts
│   │   |   ├── feature-a.reducer.ts
│   │   |   ├── feature-a.selectors.ts
│   │   ├── feature-b
│   │   |   ├── feature-b.actions.ts
│   │   |   ├── feature-b.effects.ts
│   │   |   ├── feature-b.facade.ts
│   │   |   ├── feature-b.reducer.ts
│   │   |   ├── feature-b.selectors.ts

Use the component store

If state is scoped to a (tree of) components, you can also use the NgRx component store.

Use entities

Most of the times, your global state will be lists of entities of a specific type. NgRx offers the entities plugin to make working with entities easier and avoid lots of boilerplate code.

Follow the facade pattern

To abstract implementation from your store logic, use the facade pattern.