mobxで観測可能なリストの集合体である計算ゲッターを宣言する方法

Question

私は、プロジェクトのクラス階層=> task_lists =>各配列が@ observableであるタスクを持っています。プロジェクトのすべてのtask_listsからすべてのタスクを集約するプロジェクトから "@computed get allTask​​s"を作成します。

class MsiTask { 
    @observable name:string; 
    constructor() {.... }; 
} 
class MsiTaskList { 
    @observable tasks:MsiTask[]; 
    constructor() {.... }; 
} 

class MsiProject { 
      id:string; 
      @observable name:string; 
      @observable taskLists:MsiTaskList[]=[]; 

      constructor (data) { 
        $log.debug ('Constructing a Project with', data, this); 

        this.id = data.id; 
        this.name = data.name; 

        ProjectCache[this.id] = this; 

        /** Can I do reassign taskLists or should I fill it? **/ 
        this.taskLists = lodash.map (data.taskLists || [], (taskList) => { 
          return new MsiTaskList (taskList, this); 
        }); 


      } 

      createTaskList (title:string) : MsiTaskList { 
        let taskList = new MsiTaskList ({ name: title, id: MsiUtils.uuid() }, this); 
        $log.debug ('add task list', title, taskList); 
        this.taskLists.push (taskList); 
        return taskList; 
      } 

} 

私は現在、それをこのように定義する：

クラスMsiProjectで

...

@computed get allTasks() : MsiTask[] { 
    var arrayOfTasks = lodash.map(this.taskLists, 'tasks'); 
    var result = lodash.reduce(arrayOfTasks, (res, array) => { 
     lodash.each (array, (it) => { res.push(it); }); 
     return res; 
    }, []); 
    return result; // tried also return observable.array (result); 
} 

が、私のカスタムコンポーネントで使用された場合、私はダイジェストサイクルエラーを取得しています：

私はallTask​​sが毎回別の配列を返すことを理解していますが、私の考えでは、mobxはその内容が変更されておらず、ダイジェストサイクルも生成していないと考えます。

私はmobxの使い方を完全に理解していませんか？

Answer 1

observable.arrayは配列API全体を実装していますが、実際はフードの配列ではありませんので、lodashの代わりに組み込みのユーティリティ関数を使用することをお勧めします。配列への参照を上書きしないでください。代わりにreplaceを使用してください。

例（JS Bin）

class MsiTaskList { 
    @observable tasks = []; 
    constructor(tasks) { 
    this.tasks.replace(tasks); 
    } 
} 

class MsiProject { 
    id = ''; 
    @observable name = ''; 
    @observable taskLists = []; 

    constructor(id, name, taskLists) { 
    this.id = id; 
    this.name = name; 
    const lists = taskLists.map(list => new MsiTaskList(list)); 
    this.taskLists.replace(lists); 
    } 

    @computed get allTasks() { 
    return this.taskLists.reduce((result, list) => { 
     list.tasks.forEach(task => result.push(task)); 
     return result; 
    }, []); 
    } 
}