What is the reason to use @observable in the TodoModel.ts

[changLiuUNSW]

Here is TodoModel.ts:

import { observable } from 'mobx';

export class TodoModel {

  readonly id: number;
  @observable public text: string;
  @observable public completed: boolean;

  constructor(text: string, completed: boolean = false) {
    this.id = TodoModel.generateId();
    this.text = text;
    this.completed = completed;
  };

  static nextId = 1;
  static generateId() {
    return this.nextId++;
  }
}

export default TodoModel;

I am new to Mobx, just want to know why we need use @observable inside model.
I think they are redundant because we already use @observable inside TodoStore.ts.

export class TodoStore {
......
  @observable
  public todos: Array<TodoModel>;
......

I have tried remove @observable from the model, the application still work

[rokoroku]

You're right. it doesn't need to observable on TodoModel's member property (since it only uses todos array), but when you need to change existing todo model's value, it will be required.

It's better to read the official docs: https://mobx.js.org/best/react.html