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

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

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

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

Akita

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

Поделится

Состояние истории

StateHistoryPlugin предоставляет удобный способ отмены и восстановления функциональности, избавляя вас от необходимости сохранять историю в приложении самостоятельно.

Чтобы использовать его, вы должны создать новый объект StateHistoryPlugin, передав запрос:

export class TodosPageComponent implements OnInit {
  stateHistory: StateHistoryPlugin;

  constructor(private todosQuery: TodosQuery) {}

  ngOnInit() {
    this.stateHistory = new StateHistoryPlugin(this.todosQuery);
  }
}

Akita StateHistory отслеживает историю хранилища и предоставляет вам следующие функции:

  • undo() отменить последнее изменение.
  • redo() повторить последнее изменение.
  • jumpToPast(index: number) перейти к предоставленному индексу в прошлом (при условии, что индекс действителен).
  • jumpToFuture(index: number) перейти к предоставленному индексу в будущем (при условии, что индекс действителен).
  • clear() очистить историю.
  • ignoreNext() игнорирует вызов обновления следующего магазина. Должен быть вызван до обновления хранилища.
  • destroy(clearHistory = false) отписаться и при желании очистить историю.

Плагин StateHistory также предоставляет следующие функции индикатора:

  • hasPast() Логический флаг, возвращающий, является ли история не пустой.
  • hasFuture() Логический флаг, который возвращает информацию о том, не находитесь ли вы на последнем этапе истории.

Опции

  • maxAge Максимальное количество изменений, которые будут сохранены в истории (по умолчанию: 10).
this.stateHistory = new StateHistoryPlugin(this.todosQuery, { maxAge: 3 });

EntityStateHistoryPlugin

В дополнение к общей функциональности истории, Akita также предоставляет мощный API, который помогает отслеживать одну или несколько сущностей, а не всe хранилище.

Хороший пример - это когда у вас есть таблица или список объектов, которые пользователи могут изменять, и вы хотите дать им возможность отменить/повторить их изменения для каждого объекта. Вот как вы можете это сделать:

export class TodosPageComponent implements OnInit {
  collection: EntityStateHistoryPlugin<Todo>;

  constructor(private todosQuery: TodosQuery) {}

  ngOnInit() {
    this.collection = new EntityStateHistoryPlugin<Todo>(this.todosQuery);
  }
}

С этой настройкой вы получите следующие функциональные возможности:

  • undo(entityId?: ID | ID[]) отменить последнее изменение.
  • redo(entityId?: ID | ID[]) повторить последнее изменение.
  • jumpToPast(entityId?: ID | ID[], index: number) перейти к предоставленному индексу в прошлом (при условии, что индекс действителен).
  • jumpToFuture(entityId?: ID | ID[], index: number) перейти к предоставленному индексу в будущем (при условии, что индекс действителен).
  • clear(entityId?: ID | ID[]) очистить историю.
  • destroy(entityId?: ID | ID[], clearHistory = false) отписаться и при желании очистить историю.

Плагин EntityStateHistoryPlugin также предоставляет следующие функции индикатора:

  • hasPast(entityId: ID) Логический флаг, возвращающий, является ли история не пустой.
  • hasFuture(entityId: ID) Логический флаг, который возвращает информацию о том, не находитесь ли вы на последнем этапе истории.
<tbody>
    <tr *ngFor="let todo of todos$ | async">
      <td>{{todo.title}}</td>
      <td>
          <input type="checkbox" [checked]="todo.completed"
                 (change)="update($event, todo)"/>
      </td>
      <td>
        <i
          [class.disabled]="!stateHistoryEntity.hasPast(todo.id)"
          (click)="stateHistoryEntity.undo(todo.id)">undo</i>
      </td>
      <td>
        <i
          [class.disabled]="!stateHistoryEntity.hasFuture(todo.id)"
          (click)="stateHistoryEntity.redo(todo.id)">redo</i>                                                                                   (click)="redo(todo.id)">redo</i></a>
      </td>
    </tr>
  </tbody>
</table>

Опции

  • maxAge ограничить историю (по умолчанию: 10).
  • entityIds один идентификатор или массив идентификаторов объектов (по умолчанию: все).
this.stateHistory = new StateHistoryEntityPlugin<Todo>(this.todosQuery);
this.stateHistory = new StateHistoryEntityPlugin<Todo>(this.todosQuery, entityIds: 1);
this.stateHistory = new StateHistoryEntityPlugin<Todo>(this.todosQuery, entityIds: [1,2]);