obserxable list를 mobx로 집계 한 계산 된 getter를 선언하는 방법

Question

각 프로젝트가 @observable 인 projects => task_lists => tasks의 클래스 계층 구조가 있습니다. 이제는 프로젝트의 모든 task_lists에서 모든 작업을 모으는 "@computed get allTasks"프로젝트를 만들고 싶습니다.

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

하지만 내 사용자 지정 구성 요소에서 사용될 때 나는 다이제스트주기 오류가 점점 오전 :

나는 AllTasks가 매번 다른 배열을 반환한다는 것을 이해하지만 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; 
    }, []); 
    } 
}