MobX не обновляет React Component при изменении вычисляемого массива

Question

У меня есть список задач в магазине, который не отсортирован. Вычисленное значение добавляется в хранилище, которое возвращает отсортированные задачи. Компонент React использует sortedTodos для отображения списка. Всякий раз, когда список задач изменяется, компонент не перерисовывается, если я использую todos напрямую, он работает.

export class TodoStore {
  @observable todos: Todo[] = [
    { description: "testing", createdAt: new Date(), isCompleted: false },
  ];

  @computed get sortedTodos(): Todo[] {
    const sortedTodos = this.todos.sort(
      (a, b) => a.createdAt.getTime() - b.createdAt.getTime()
    );
    return sortedTodos;
  }

  @action addTodo = (description: string) => {
    this.todos.push({
      description,
      createdAt: new Date(),
      isCompleted: false,
    });
  };
}

Answer 1

Я нашел решение проблемы.

Вместо прямого назначения массива я использовал observable.array, и он работает.

export class TodoStore {
  @observable todos: Todo[] = observable.array();

  ...
}

Не совсем уверен, почему так, но он работает , Я думаю, причина в том, что при использовании обычного массива объекты внутри по умолчанию не являются наблюдаемыми, а при использовании observable.array сами объекты массива являются наблюдаемыми.