Combine reaction with async callbacks

[Lonli-Lokli]

Is tthere better, mobx-way to rewrite it without it? I cannot use await in callbacks

this.disposeReaction = reaction(
     // Watch for bot turn state - EXPLICIT state watching only
     () => ({
       isBot: this.gameClient.currentPlayer.isBot,
       subPhase: this.gameClient.state.subPhase,
       turnCount: this.gameClient.state.turnCount,
       activeTossIn: this.gameClient.state.activeTossIn,
     }),
     // Execute bot turn when state is ready
     // Note: Using fire-and-forget pattern here is intentional.
     // Reactions should not await - they trigger async operations that will
     // naturally loop back through state changes. Error handling occurs within methods.
     ({ isBot, subPhase, activeTossIn }) => {
       // Handle toss-in phase separately (all bot players participate)
       if (subPhase === 'toss_queue_active' && activeTossIn) {
         // Fire-and-forget: Let the async operation run independently
         this.handleTossInPhase().catch((error) => {
           console.error('[BotAI] Error in toss-in phase:', error);
         });
         return;
       }

       // Only execute bot logic when it's a bot's turn
       if (!isBot) {
         return;
       }

       // Execute bot turn based on current subPhase
       // Fire-and-forget: Let the async operation run independently
       this.executeBotTurn().catch((error) => {
         console.error('[BotAI] Error executing bot turn:', error);
       });
     }
   );

[sunnypatell]

@Lonli-Lokli your .catch() pattern is actually fine. reaction effects are fire-and-forget by design since the return value is never awaited (source). there's no hidden "mobx-way" to make them natively async.

that said, flow() is a cleaner upgrade here because it gives you auto action wrapping at each async step + built-in cancellation (so a new reaction trigger can cancel an in-flight bot turn):

import { reaction, flow, isFlowCancellationError } from 'mobx'

class BotAI {
  pendingFlow = null

  constructor() {
    this.disposeReaction = reaction(
      () => ({
        isBot: this.gameClient.currentPlayer.isBot,
        subPhase: this.gameClient.state.subPhase,
        turnCount: this.gameClient.state.turnCount,
        activeTossIn: this.gameClient.state.activeTossIn,
      }),
      ({ isBot, subPhase, activeTossIn }) => {
        this.pendingFlow?.cancel()

        if (subPhase === 'toss_queue_active' && activeTossIn) {
          this.pendingFlow = this.handleTossInFlow()
        } else if (isBot) {
          this.pendingFlow = this.executeBotTurnFlow()
        }
      }
    )
  }

  executeBotTurnFlow = flow(function* () {
    try {
      const move = yield calculateMove()
      this.state.lastMove = move // no runInAction needed
    } catch (e) {
      if (!isFlowCancellationError(e)) {
        console.error('[BotAI] Error:', e)
      }
    }
  })
}

why flow over raw async/await:

• each yield is auto-wrapped in action(), so state changes after async steps don't need runInAction()
• cancel() aborts the chain cleanly (throws FlowCancellationError which you can filter)
• reaction's onError only catches sync errors (the wrapErrorHandler uses try/catch, not .catch()), so async errors need handling inside the effect either way

ref: flow docs | reactions docs