Sending events inside action

[smarko82]

In my situation, I have entry actions that draw some graphical objects for each state: it's something like:

actions: {
    setInitialHomeDetailAndNavViews: (context: IMainPageFSMContext) => {
        const homeViewCtrl = new MenuViewController();

        context.homeViewCtrl.updateHomeNavView(homeViewCtrl);
    },

But I need to capture events of this viewcontrollers tp translate into events for my machine. I should do something like:

actions: {
    setInitialHomeDetailAndNavViews: (context: IMainPageFSMContext) => {
        const homeViewCtrl = new MenuViewController();

        homeViewCtrl.onChangeFocus = () => send('MENU_ITEM_CHANGED'))

        context.homeViewCtrl.updateHomeNavView(homeViewCtrl);
    },

But, of course, I cannot use send action creator in this way. How can I send an event in the most efficient way in my situation?

[davidkpiano]

Sounds like you want this MenuViewController to be long-lived. Remember that actions are effects that are fire-and-forget; that is, they are not appropriate for things that need to be long-lived, and/or communicate back with the machine.

Invoke the MenuViewController() instead:

invoke: {
  id: 'homeView',
  src: () => (sendBack, receive) => {
    const homeViewControl = new MenuViewController();

    homeViewCtrl.onChangeFocus = () => sendBack('MENU_ITEM_CHANGED'));

    receive(event => {
      if (event.type === 'doSomething') {
        homeViewCtrl.doSomething();
      }
    });
    
    return () => { homeViewControl.destroy(); } // or similar
  }
}

[smarko82]

@davidkpiano Yes, invoking callbacks is something I usually forget, but it's a brilliant solution for my situation.
I just have a couple of considerations:

• I was using actions also because I wanted to distinguish machine when executed on real device (in that case, use actual ViewControllers) and when used on inspector (in this case, using actual ViewControllers somewhat crash the inspector, because of imports that doesn't have sense outside the device): using actions, it was trivial by passing different conf objects to machine, now I should think something else, I think... But I will see on this issue (I think I will try conditional import)

• onreceive sendback function is called with event as param...but not with context? Consider this situation:

              vodArea: {
                    initial: 'drawVODArea',
                    states: {
                        drawVODArea: {
                            entry: actions.log('drawVODArea!!!'),
                            invoke: {
                                id: 'drawVODArea',
                                src: (context, event) => (sendBack, receive) => {  
                                    
                                    
                                   const vodListController = new DetailBottomLeftViewController(context.currentVodList); //TODO: DetailBottomLeftViewController shall be called VODListViewController
                                        context.homeViewController.updateDetailBottomLeftView(vodListController);
                                    }
                                    
                                    receive((event) => {
                                        if (event.type === 'MENU_ITEM_CHANGED') {
  
                                            const vodListController = new DetailBottomLeftViewController(context.currentVodList); //context.currentVodList is not updated!
                                            
                                            context.homeViewController.updateDetailBottomLeftView(vodListController); 
                                        }                                        
                                    });
                                    
                                }
                            },
                            on: {
                                MENU_ITEM_CHANGED: {
                                    actions: [
                                        assign({
                                            currentVodList: otherVodList
                                        }),
                                        send((context, event) => (
                                            {
                                                type: 'MENU_ITEM_CHANGED',
                                                index: event.index
                                            }),
                                        { to: 'drawVODArea' })
                                    ]
                                }
                            }
                        }
                    },
                        
                        
                },
  
  

In this situation, there is no way to access updated context in the onreceive sendback handler.
Of course, there are solutions (I think: passing directly the right vodList param in the event to drawVODArea), but anyway it would be hel'ful to access to updated context, I think.

[Andarist]

Accessing the updated context is against the actor model - you should sync data using events (which from what I see you have done).