Mobx with angular 정리.

Mobx with angular

github : https://github.com/mobxjs/mobx-angular 정리.
정확하게 이해한건진 모르겠네...

Mobx Store

import { observable, action, autorun, reaction, computed } from 'mobx-angular';
​
@Injectable()
class Store {
  private init 
  @observable value;
  
  constructor() { //reaction(), autorun()이 bind될 수 있도록 실행.
    this._someValue에대한추가작업(); //bind 작업
    this._값변경시실행할것(); //bind 작업.
  }
  @action doSomething() { value = 'asdfasdf'; } // return 없는 action
 
  @computed get someValue() { //action이 있을수도 있고 return 이 있음. 
    
      return value.length;
  }
  private _someValue에대한추가작업() {
      //@computed method에 대해서 subscribe 
      reaction(() => this.someValue, (someLength) =>{
          // someLength에 대한 처리... 언제 필요할까?
      });
  }
  private _값변경시실행할것(){ //storage저장등등.
      autorun(()=>{
          //@obserable 값이 변경될때 마다 실행.
      })
  }
}

@observable

관리하고자 하는 값

@computed

값 변경 X, 리턴 O (예 : getter)

computed를 통한 값변경을 위해서는 reaction을 따로 구현하여 바인딩해야함.

@action

값변경 O, 리턴 X(예 : setter 또는 조작하여 저장)

reaction() in pure private method

@computed가 발생했을때 값변경 또는 추가기능을 넣을때 사용.

autorun() in pure private method

@observable 값이 변경 될때 마다 실행 되는 trigger mehtod

컴포넌트가 처리하는 방법

changeDetection 처리

​ ChangeDetectionStrategy.onPush( 해당 components의 state가 변경되지 않는한 change detection을 하지 않는다.)

Dom Element내 처리

*mobxAutorun

<div *mobxAuthrun>
    {{someMobxStore의 observable value 또는 computed method }}
</div>

​ 하위 모든 mobx observale값의 변경사항에 대해서 관찰.

*mobxReaction

​ mobxReaction으로 지정된 Method를 주시하여 해당 method 실행이 되면 화면을 갱신.

<div *mobxReaction="changeValue.bind(this)">
    {{someMobxStore의 observable value 또는 computed method }}
</div>

mobx Store 어떻게 쓰면 좋을까?

Only store

데이타 저장소로만 사용.

Store File+ 전용 Service File

Store에 전용 Service를 만들어 Store를 한번 래핑해놓는다.

HTTP 통신은 전용 Service에서 구현한다.

Store + 필요한 서비스들에서 알아서 가져다가 쓰기.

필요한 서비스에서 Store 변경이 필요할 시 그때 그때 바꾼다.

Store의 값을 변경한다.