Store¶

NgRx Store (или просто хранилище) хранит в себе глобальное состояние Angular приложения в виде одного большого объекта.

В приложении может быть только одно хранилище.

Хранилище в NgRx представлено сервисом Store и выполняет следующие функции:

хранение глобального состояния приложения;
обновляет состояние в ответ на действие, принимаемое через метод dispatch();
предоставление доступа к состоянию.

Формирование глобального состояния в NgRx Store происходит путем объединения более мелких состояний, которые возвращают зарегистрированные в приложении редюсеры. Делается это с использованием ActionReducerMap<State>.

users.reducer.ts

export interface State {
  /* ... */
}
export function usersReducer(
  state: State = initialState,
  action: UsersUnion
) {
  /* ... */
}

articles.reducer.ts

export interface State {
  /*...*/
}
export function articlesReducer(
  state: State = initialState,
  action: ArticlesUnion
) {
  /*...*/
}

index.ts

import * as Users from './reducers/users.reducer';
import * as Articles from './reducers/articles.reducer';

export interface State {
  users: Users.State;
  articles: Articles.State;
}

export const reducers: ActionReducerMap<State> = {
  users: Users.usersReducer,
  articles: Articles.articlesReducer,
};

app.module.ts

import { reducers } from './store/reducers/index';

@NgModule({
  imports: [StoreModule.forRoot(reducers)],
})
export class AppModule {}

Ключи верхнего уровня иерархии глобального объекта состояния задаются разработчиком самостоятельно.

В последнем примере состояние определяется в корневом модуле. Но также NgRx Store может формироваться из состояний, определенных для второстепенных модулей.

users.module.ts

import { usersReducer } from './reducers/users.reducer';

@NgModule({
  imports: [
    StoreModule.forFeature('users', usersReducer),
    UsersModule,
  ],
})
export class UsersModule {}

app.module.ts

@NgModule({
  imports: [StoreModule.forRoot({}), UsersModule],
  // ...
})
export class AppModule {}

Для регистрации редюсеров на уровне второстепенных модулей используется метод forFeature() модуля StoreModule.forFeature(). При этом корневой модуль может вообще не иметь собственных редюсеров.

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

Доступ к глобальному состоянию осуществляется через экземпляр сервиса Store, прямое обращение к которому возвращает объект Observable.

articles.actions.ts

import { Action } from '@ngrx/store';

export enum ArticlesActions {
  LoadArticle = '[Articles Page] LoadArticle',
  PublishArticle = '[Articles Page] PublishArticle',
}

export interface Article {
  id: number;
  title: string;
  published: boolean;
}

export class LoadArticle implements Action {
  readonly type = ArticlesActions.LoadArticle;

  constructor(public payload: { article: Article }) {}
}

export class PublishArticle implements Action {
  readonly type = ArticlesActions.PublishArticle;

  constructor(public payload: { id: number }) {}
}

export type ArticlesUnion = LoadArticle | PublishArticle;

articles.reducer.ts

export interface State{
    articles: {[id: number]: Article},
    count: number;
}

const initialState: State = {
    articles: {},
    count: 0
};

export function articlesReducer(state: State = initialState, action: ArticlesUnion){
    switch(action.type){
    case ArticlesActions.LoadArticle:
        return {
        ...state,
        articles: {...state.articles, [action.payload.article.id]: action.payload.article}
        };
    case ArticlesActions.PublishArticle:
        return {
        ...state,
        articles: {...{published: true, ...state.article[action.payload.id]}, ...state.articles
        };
    default:
        return state;
    }
}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private store: Store) {
    this.store.subscribe((state) => console.log(state));

    this.store.dispatch(
      new LoadArticle({
        article: {
          id: 1,
          title: 'Learn NgRx',
          publish: false,
        },
      })
    );

    this.store.dispatch(new PublishArticle({ id: 1 }));
  }
}

Значение NgRx Store передается обработчику непосредственно в момент вызова метода subscribe() и далее при любом изменении состояния.

Для доступа к определенным частям состояния или вычисления новых данных на основе уже имеющихся в хранилище, используйте селекторы.

Store¶

Комментарии