> For the complete documentation index, see [llms.txt](https://angular-ru.gitbook.io/sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://angular-ru.gitbook.io/sdk/ngxs/state-repository.md).

# @StateRepository

`@StateRepository` - This is a decorator that provides an extension of the functionality of NGXS states, thanks to which you get access to the internal mechanism of the NGXS.

By default, you can inherit from abstract classes that give you different benefits:

* `NgxsDataRepository<T>` a standard repository class that gives you control over your state.

```typescript
import {NgxsDataRepository} from '@angular-ru/ngxs/repositories';
import {StateRepository} from '@angular-ru/ngxs/decorators';

@StateRepository()
@State({
  name: 'app',
  defaults: {},
})
@Injectable()
export class AppState extends NgxsDataRepository<AppModel> {}
```

| Method/Property                                                        | Return type    | Description                                         |
| ---------------------------------------------------------------------- | -------------- | --------------------------------------------------- |
| state.name                                                             | string         | State name                                          |
| state.initialState                                                     | T              | Default state value                                 |
| state.getState()                                                       | T              | Current state value                                 |
| state.snapshot                                                         | T              | Memoized state value (getter)                       |
| state.patchState(Partial\<T \| Immutable\<T>)                          | void           | Ability to update part of the state                 |
| state.setState(Immutable\<T> \| T \| (state: T) => T \| Immutable\<T>) | void           | Overwrite state                                     |
| state.reset()                                                          | void           | Reset state with default state value                |
| dispatch(actions: ActionType \| ActionType\[])                         | void           | Standard dispatch method                            |
| state.state$                                                           | Observable\<T> | State data stream that you can subscribe to changes |

* `NgxsImmutableDataRepository<T>` it's the descendant of the *`NgxsDataRepository`* class, however it gives you completely deep immutable control over your state and prevents the code from compiling if the user tries to mutate something in the state. It is recommended to use it if you understand what immutability of objects is.

```typescript
import {NgxsImmutableDataRepository} from '@angular-ru/ngxs/repositories';
import {StateRepository} from '@angular-ru/ngxs/decorators';

@StateRepository()
@State({
  name: 'app',
  defaults: {},
})
@Injectable()
export class AppState extends NgxsImmutableDataRepository<AppModel> {}
```

| Method/Property                                                               | Return type                | Description                                         |
| ----------------------------------------------------------------------------- | -------------------------- | --------------------------------------------------- |
| state.name                                                                    | string                     | State name                                          |
| state.initialState                                                            | Immutable\<T>              | Default state value                                 |
| state.getState()                                                              | Immutable\<T>              | Current state value                                 |
| state.snapshot                                                                | Immutable\<T>              | Memoized state value (getter)                       |
| state.patchState(Partial\<T \| Immutable\<T>)                                 | void                       | Ability to update part of the state                 |
| state.setState(Immutable\<T> \| T \| (state: Immutable\<T>) => Immutable\<T>) | void                       | Overwrite state                                     |
| state.reset()                                                                 | void                       | Reset state with default state value                |
| dispatch(actions: ActionType \| ActionType\[])                                | void                       | Standard dispatch method                            |
| state.state$                                                                  | Observable\<Immutable\<T>> | State data stream that you can subscribe to changes |

* `NgxsDataEntityCollectionsRepository<V, K>` a standard repository class for entity which provides an API to manipulate and query entity collections.

```typescript
@StateRepository()
@State({
  name: 'article',
  defaults: createEntityCollections(),
})
@Injectable()
class ArticleEntitiesState extends NgxsDataEntityCollectionsRepository<Article> {}
```

| Method/Property                                   | Return type                               | Description                                                                 |
| ------------------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------- |
| state.name                                        | string                                    | State name                                                                  |
| state.initialState                                | NgxsEntityCollections\<V, K>              | Default state value                                                         |
| state.getState()                                  | NgxsEntityCollections\<V, K>              | Current state value                                                         |
| state.snapshot                                    | NgxsEntityCollections\<V, K>              | Memoized state value (getter)                                               |
| state.reset()                                     | void                                      | Reset state with default state value                                        |
| state.state$                                      | Observable\<NgxsEntityCollections\<V, K>> | State data stream that you can subscribe to changes                         |
| state.entities()                                  | EntityDictionary\<K, V>                   | Entities dictionary                                                         |
| state.entitiesArray()                             | V\[]                                      | Entities array                                                              |
| state.entities$                                   | Observable\<EntityDictionary\<K, V>>      | Observable of entities dictionary                                           |
| state.entitiesArray$                              | Observable\<V\[]>                         | Observable of entities array                                                |
| dispatch(actions: ActionType \| ActionType\[])    | void                                      | Standard dispatch method                                                    |
| state.addOne(entity: V)                           | void                                      | Add one entity to the collection                                            |
| state.addMany(entities: V\[])                     | void                                      | Add multiple entities to the collection                                     |
| state.setOne(entity: V)                           | void                                      | Add or Replace one entity in the collection                                 |
| state.setMany(entities: V\[])                     | void                                      | Add or Replace multiple entities to the collection                          |
| state.setAll(entities: V\[])                      | void                                      | Replace current collection with provided collection                         |
| state.updateOne(update: EntityUpdate\<V, K>)      | void                                      | Update one entity in the collection. Supports partial updates               |
| state.updateMany(updates: EntityUpdate\<V, K>\[]) | void                                      | Update multiple entities in the collection. Supports partial updates        |
| state.upsertOne(entity: V)                        | void                                      | Add or Update one entity in the collection. Supports partial updates        |
| state.upsertMany(entities: V\[])                  | void                                      | Add or Update multiple entities in the collection. Supports partial updates |
| state.removeOne(id: K)                            | void                                      | Remove one entity from the collection                                       |
| state.removeMany(ids: K\[])                       | void                                      | Remove multiple entities from the collection                                |
| state.removeAll()                                 | void                                      | Remove all entities from the collection                                     |

## Composition

You can compose multiple stores together using class inheritance. This is quite simple:

```typescript
abstract class CommonCounter extends NgxsDataRepository<number> {
  @DataAction()
  public increment() {
    this.ctx.setState((state: number) => ++state);
  }
}

@StateRepository()
@State({
  name: 'a',
  defaults: 0,
})
@Injectable()
class A extends CommonCounter {}

@StateRepository()
@State({
  name: 'b',
  defaults: 0,
})
@Injectable()
class B extends CommonCounter {}

@Component({
  selector: 'app',
  // ..
})
class AppComponent implements OnInit {
  constructor(
    public a: A,
    public b: B,
  ) {}

  public ngOnInit(): void {
    console.log(a.snapshot); // 0
    console.log(b.snapshot); // 0
  }
}
```

Now when `A` or `B` is invoked, it will share the actions of the `CommonCounter`. Also, all state options are inherited if add `@State` under `CommonCounter`.

```typescript
@State({
  name: 'commonCounter',
  defaults: 0,
})
@Injectable()
class CommonCounterState extends NgxsDataRepository<number> {
  @DataAction()
  public increment() {
    this.ctx.setState((state: number) => ++state);
  }
}

@StateRepository()
@State({name: 'a'})
@Injectable()
class A extends CommonCounterState {}

@StateRepository()
@State({name: 'b'})
@Injectable()
class B extends CommonCounterState {}

@Component({
  selector: 'app',
  // ..
})
class AppComponent implements OnInit {
  constructor(
    public a: A,
    public b: B,
  ) {}

  public ngOnInit(): void {
    console.log(a.snapshot); // 0
    console.log(b.snapshot); // 0
  }
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://angular-ru.gitbook.io/sdk/ngxs/state-repository.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.