Mobx 심화 mobx의 reactions 종류 autorun, reaction, when

Mobx

• observable의 state가 변경되면서 부수적으로 발생하는 기능

autorun

autorun(effect: (reaction) => void

 

• effect 함수 내부의 obsevable를 subscribe 합니다.
• obsevable이 변경되면 autorun 를 실행시킵니다
• autorun은 초기화시 실행 됩니다.

reaction

reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?)

• autorun 보다 더 세밀한 제어가 가능
• 2가지 인자를 받는데 첫번째 함수의 observable를 추적하고 renturn 값을 2번째 함수에서 사용합니다.
• 첫번째 함수에서 쓰인 observable의 변화에만 반응합니다.
• autorun과 달리 초기화시 실행 되지 않습니다.

autorun vs reaction 차이점 비교

class Animal {
  name;
  energyLevel;

  constructor(name) {
    this.name = name;
    this.energyLevel = 100;
    makeAutoObservable(this);
  }

  reduceEnergy() {
    this.energyLevel -= 10;
  }

  get isHungry() {
    return this.energyLevel < 50;
  }
}

const giraffe = new Animal("Gary");

console.log("Now let's change state!");
for (let i = 0; i < 10; i++) {
  giraffe.reduceEnergy();
}

}

reaction 사용시

reaction(
  () => giraffe.isHungry,
  isHungry => {
    if (isHungry) {
      console.log("Now I'm hungry!");
    } else {
      console.log("I'm not hungry!");
    }
    console.log("Energy level:", giraffe.energyLevel);
  }
);

• 결과

Now let's change state!
Now I'm hungry!
Energy level: 40

• 처음 초기화 시 실행 되지 않는다.
• effect 함수 내에서 쓰이는 giraffe.energyLevel의 변화는 추적하지 않는다.

autorun 사용시

autorun(() => {
   console.log("Energy level:", giraffe.energyLevel);
  if (giraffe.isHungry) {
    console.log("Now I'm hungry!");
  } else {
    console.log("I'm not hungry!");
  }
});

• 결과

Energy level:100
I'm not hungry!
Now let's change state!
Energy level:90
I'm not hungry!
Energy level:80
I'm not hungry!
Energy level:70
I'm not hungry!
Energy level:60
I'm not hungry!
Energy level:50
I'm not hungry!
Energy level:40
Now I'm hungry!
Energy level:30
Now I'm hungry!
Energy level:20
Now I'm hungry!
Energy level:10
Now I'm hungry!
Energy level:0
Now I'm hungry!

• 처음 초기화 시 실행 된다.
• 인자로 받은 함수내에 있는 모든 observable를 추적한다.

when

when(predicate: () => boolean, effect?: () => void, options?)

when(predicate: () => boolean, options?): Promise

• predicate가 true를 반환 할때 까지 observable를 추적한다.

var person = observable({
  firstName: "Matt",
  lastName: "Ruby",
  age: 0
});

when(
  () => {
    console.log("Age: " + person.age);
    return person.age >= 20;
  },
  () => {
    console.log("성인이 됐으니 알아서 하셈");
  }
);

_.times(20, function () {
  person.age = _.random(40);
});

• predicate 함수가 true를 반환 할때까지만 추적하고 그 이후는 추적하지 않는다.
• true 를 반환하면 effect 함수를 실행한다.
• 추적 하던 observable은 변경되도 상관하지 않는다.

await when

• 2번째 인자인 함수를 넘기지 않으면 when은 Promise를 반환합니다.
• 이를 이용해서 observable state가 변경 되는 시점까지 기다릴수 있습니다.

async function() {
    await when(() => that.isVisible)
    // etc...
}

주의

• 비동기 추적 안함
• observable 이 변경되면 즉시 실행됨.
  • 그러나 (trans)action이 끝나기 전에는 실행 되지 않습니다.

그동안 didupdate,useEffect 에서 처리 했던 나 반성합니다.

추가 주의 사항 정리 용

https://mobx.js.org/reactions.html

Running side effects with reactions · MobX

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."