dataMachine.js

 const dataMachine = Machine({
    id: "dataMachine",
    initial: "idle",
    context: {
      pageData: {},
      results: []
    },
    states: {
      idle: {
        on: {
          FETCH: "loading",
          UPDATE: "updating"
        }
      },
      loading: {
        invoke: {
          src: "fetchData",
          onDone: { target: "success" },
          onError: { target: "failure", actions: "setMessage" }
        }
      },
      updating: {
        invoke: {
          src: "updateData",
          onDone: { target: ["success", "loading"] },
          onError: { target: "failure", actions: "setMessage" }
        }
      },
      success: {
        entry: ["setResults", "setPageData"],
        on: {
          FETCH: "loading"
        },
        initial: "unknown",
        states: {
          unknown: {
            on: {
              "": [
                { target: "withData", cond: "hasData" },
                { target: "withoutData" }
              ]
            }
          },
          withData: {
            //entry: ["notifyHasData"]
          },
          withoutData: {}
        }
      },
      failure: {
        entry: ["setMessage"],
        on: {
          FETCH: "loading"
        }
      }
    }
  },
  {
    actions: {
      setResults: assign((ctx, event) => ({
        results:
          event.data && event.data.pageData && event.data.pageData.page > 1
            ? concat(ctx.results, event.data.results)
            : event.data.results
      })),
      setPageData: assign((ctx, event) => ({
        pageData: event.data.pageData
      })),
      setMessage: assign((ctx, event) => ({
        message: event.message
      }))
    },
    guards: {
      hasData: (ctx, event) => !!ctx.results && ctx.results.length > 0
    }
  }
);