Skip to content

Instantly share code, notes, and snippets.

@MaelFr

MaelFr/machine.js

Last active March 26, 2021 17:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MaelFr/c650c9dd130201e3e82d63239d1eb85f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MaelFr/c650c9dd130201e3e82d63239d1eb85f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MaelFr revised this gist Mar 26, 2021. No changes.
  2. MaelFr revised this gist Nov 6, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -62,7 +62,9 @@
    type: 'final'
    },
    failure: {
    type: 'final'
    on: {
    RETRY: 'loading'
    }
    }
    }
    });
  3. MaelFr revised this gist Nov 6, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -55,6 +55,7 @@
    longLoading: {
    on: {
    RESOLVE: 'success',
    REJECT: 'failure',
    }
    },
    success: {
  4. MaelFr created this gist Nov 6, 2020.
    68 changes: 68 additions & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@

    // Available variables:
    // - Machine
    // - interpret
    // - assign
    // - send
    // - sendParent
    // - spawn
    // - raise
    // - actions
    // - XState (all XState exports)

    const fetchMachine = Machine({
    id: 'fetch',
    initial: 'idle',
    context: {
    elapsed: 0,
    duration: 2,
    interval: 0.1
    },
    states: {
    idle: {
    on: {
    FETCH: 'loading'
    }
    },
    loading: {
    invoke: {
    src: context => cb => {
    const interval = setInterval(() => {
    cb('TICK');
    }, 1000 * context.interval);

    return () => {
    clearInterval(interval);
    };
    }
    },
    on: {
    '': {
    target: 'longLoading',
    cond: context => {
    return context.elapsed >= context.duration;
    }
    },
    RESOLVE: 'success',
    REJECT: 'failure',
    TICK: {
    actions: assign({
    elapsed: context => +(context.elapsed + context.interval).toFixed(2)
    })
    }
    }
    },
    longLoading: {
    on: {
    RESOLVE: 'success',
    }
    },
    success: {
    type: 'final'
    },
    failure: {
    type: 'final'
    }
    }
    });