Pourquoi la réaction avec `when` fonctionne-t-elle et avec 'observer' ou 'intercepter' non?

Question

Mobx-utils/fromPromise.state N'est PAS Observable!

const { observable, when, reaction, intercept, observe, isObservable } = mobx; 
 
const { fromPromise, whenWithTimeout } = mobxUtils; 
 

 
const promise = fetch('https://jsonplaceholder.typicode.com/todos') 
 
    .then(res => res.json()) 
 
const result = fromPromise(promise); 
 

 
console.assert(isObservable(result.state), 'state is NOT an isObservable'); 
 

 
/* WORKS! 
 
when(
 
() => result.state !== "pending", 
 
() => { 
 
    console.log("Got ", result.value) 
 
    } 
 
); 
 
*/ 
 

 
// NOT WORK, Why ? 
 
observe(result, 'state', change => (console.log('observe', change)), true) 
 
intercept(result, 'state', change => (console.log('intercept', change))); 
 
reaction(
 
() => result.state, 
 
    state => console.log('reaction', state) 
 
);

<script src="https://unpkg.com/mobx@3/lib/mobx.umd.js"></script> 
 
<script src="https://unpkg.com/mobx-utils/mobx-utils.umd.js"></script>

Answer 1

result.state n'est pas observable, mais si vous jetez un oeil à its implementation vous verrez que lorsque vous result.state il accède observable result._state.

private _state: IObservableValue<PromiseState> = observable(PENDING as any); 
.... 
get state(): PromiseState { 
    return this._state.get(); 
} 

reaction et when travail parce qu'ils réagissent à l'accès _state qui se produit lorsque vous lisez state. Ceci est clairement expliqué in the documentation.

observe et intercept ne fonctionnent pas car result n'est pas observable. Ils s'attendent à ce que leur premier paramètre soit un observable. Par conséquent, le code même mis à jour ne fonctionnera pas

observe(result, '_state', change => (console.log('observe', change)), true) 
intercept(result, '_state', change => (console.log('intercept', change))); 

Pour résoudre ce problème passe result._state comme premier argument.

observe(result._state, change => (console.log('observe', change)), true) 
intercept(result._state, change => (console.log('intercept', change)));