У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Akita

Строгий менеджер состояний для приложений на javascript

Поделится

Store

Хранилище - это отдельный объект, который содержит состояние хранилища и служит «единственным источником данных».

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

import { Store, StoreConfig } from '@datorama/akita';

export interface SessionState {
   token: string;
   userDetails: UserDetails
}

export function createInitialState(): SessionState {
  return {
    token: '',
    userDetails: null
  };
}

@StoreConfig({ name: 'session' })
export class SessionStore extends Store<SessionState> {
  constructor() {
    super(createInitialState());
  }
}

С этой настройкой вы получаете Store следующими способами:

  • update(newStateFn: Partial<S> | state: Readonly<S> => S)

update() - это основной метод API, который обновляет хранилище. Он получает функцию обратного вызова, которая получает текущее состояние и возвращает новое неизменное состояние, которое будет новым значением хранилища.

import { SessionStore } from './session.store';

export class SessionService {
  constructor(private sessionStore: SessionStore) {}

  updateUserName(name: string) {
    this.sessionStore.update(state => ({
      userDetails: {
        ...state.userDetails,
        name
      }
    }));
  }  
}

В приведенном выше примере мы вызываем метод update() и возвращаем новое неизменное состояние. (обратите внимание, что мы используем оператор spread)

Вы можете пропустить функцию обратного вызова в двух случаях:

1 Если вам нужно передать весь объект состояния, например:

import { SessionStore } from './session.store';

export class SessionService {

  constructor(private sessionStore: SessionStore) {}

  login(creds) {
    httpProvider.login(creds).subscribe(({token, userDetails}) => {
      this.sessionStore.update({
        token,
        userDetails
      });
   });
  }
}

2 Когда вы хотите обновить корневой ключ состояния, например:

import { SessionStore } from './session.store';

export class SessionService {

  constructor(private sessionStore: SessionStore) {}

  updateDetails(userDetails) {
    httpProvider.updateDetails(userDetails).subscribe(({ userDetails }) => {
      this.sessionStore.update({
        userDetails
      });
    });
  }
}
  • setLoading(isLoading: boolean) - Обновить состояние загрузки store.
  • setError(error: any) - Обновить состояние ошибки store.
  • destroy() - Уничтожить store.

Если вам нужны «безопасные типы» при использовании метода update с функцией обратного вызова, ознакомьтесь с рекомендациями в этой теме.