Akita

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

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]);