Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Replace Inline Functions with String Shorthands

    xstateXState
    >=4.6.7
    javascriptJavaScript

    It is considered best practice to use the string shorthand for actions, guards, and more when configuring an XState Machine. We do this by providing a second argument to the Machine factory function: the options object.

    On this object, we can define our actions, guards, activities, services and more. We then refer to the name of these functions with a string of the same name.

    javascript//...
    broken: {
      entry: ['logBroken']
    }
    //...
    // In the options object
    {
      actions: {
        logBroken: (context, event) => { console.log('yo I am broke') }
      }
    }
    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Rather than defining our actions as inline functions, or even extracting them out, we can handle this by using a string shorthand and the options object on the machine factory function.

    We'll start by adding an object as the second argument to machine. It's hard to see on this screen, but if we go all the way up, this is the first object that ends here, and this is the second object. This is the options object. On this object, we can define things like actions, guards, services, activities, and delays. We'll focus on actions in this lesson.

    We add an actions property. That actions property becomes an object. We can define our functions here on this object. Rather than having log location and buy a new bulb up extracted as functions, we can do log location. Then we can take the function that we had up here. I want to copy that out, get rid of that, and paste that in here.

    I'll do the same for buy a new bulb. I will copy this, cut it out, remove that, and paste it in place here. Now, I can come here and I can turn these into strings. XState knows that I'm looking for actions with this name on this actions object here.

    I can save this. If I send a break event to the machine and pass along the information of the location, I can see that logged out in the terminal.