mobx에서 계산/관찰 가능 항목을 사용하는 경우

Question

나는 mobx를 많이 사용하고있는 것처럼 느껴진다. 그러나 나는 무엇인가를 명확히하고 싶다. 나는 몇 가지 관찰 가능한과 상점이있어, 핵심이있는 객체의 배열 (타이프) 인 :

class ClientStore { 
    constructor() { 
     this.loadClients(); 
    } 

    @observable private _clients: IClient[] = []; 
    @computed get clients() { 
     return this._clients; 
    } 
    @observable isFetching: boolean = false; 
    @observable sortField: 'title' | 'modified' = 'modified'; 
    @observable sortDescending: boolean = true; 

    getClientByUrlName(urlName: string): IClient { 
     return this._clients.find(c => c.urlName === urlName); 
    } 
etc... 

내 질문은 마지막 함수가 - getClientByUrlName. 그것이 관찰 가능한 것으로부터 발견 되었기 때문에, 그 함수를 사용하고있는 @ observer 반응 컴포넌트는 올바르게 다시 렌더링됩니다. 이게 관용적 인 마피아 같습니까? 그것은 계산 된 값이어야한다고 생각합니다. 내가 사용해야 할 구성 요소에서 계산 된 값을 사용해야합니까?

//import singletone ClientStore 
class ClientDetailsView extends React.Component<{params:{urlName:string}}, void> { 

    @computed get client() { 
     return ClientSotre.clients.find(c => c.urlName === this.props.params.urlName); 
    } 

...rest of react component 

여기 모범 사례와 문제를 찾고 있습니다. 어떤 도움을 주셔서 감사합니다.

* 편집 고정 코드 샘플 오류 원칙적으로

Answer 1

@computed이 MobX을 알려주는 지시 간단하다 : "이 변경을 사용하는 관찰 가능한 모든 때까지 캐시 할 수있는이 값". 사실 앱은 항상 제외 될 수 있습니다. 앱이 더 많이 재 계산된다는 의미 일뿐 아니라 결과도 변경되지 않습니다.

따라서 대부분의 경우 문제가되지 않는 기능에 대해서는 @computed이 누락되었습니다. 그럴 경우 createTransformer을 사용하면 하나의 인수로 된 함수를 사용하고 계산 된 값의 (자체 정리) 메모 캐시를 만들 수 있습니다. 그러나 좀 더 복잡하기 때문에 실제로 ClientDetailsView에서 계산 된 속성을 소개하는 솔루션이 더 좋습니다. 그 계산 된 속성 (이 경우 필요로하는 구성 요소)을 넣을 좋은 장소가있는 한 실제로 그렇게하는 것이 좋습니다.