如何對 xState 中的子狀態變化做出反應

Question

我繼承了一個使用 xState 的反應項目，這對我來說是非常陌生的。 在這台機器中有一個“保存” state 有幾個子狀態。

像這樣：

states : {
      saving: {
        id: 'saving',
        initial: 'saving',
        states: {
          saving: {
            invoke: {
              src: 'updateService',
              onDone: [
                {
                  target: 'fetchSchooldays',
                  actions: 'setKursus',
                  cond: 'dateChange',
                },
                {
                  target: '#idle',
                  actions: 'setKursus',
                },
              ],
              onError: [
                //not interesting
              ],
            },
          },
          fetchSchooldays: {
            invoke: {
              //Not interesting
            },
          },
        },
      },
}

在反應頁面我看到這個：

const [state, send, kursusService] = useMachine([the machine]);

現在我想在 saving.saving (updateService) 服務完成后做點什么（只是一個 console.log 就可以了），但我想不通。

我一直在查看文檔和示例，但我相信我需要一些指示以指示從何處開始從機器外部監視子狀態更改。

-- 附錄 1 ----- 今天早上我嘗試制作一個“介於”狀態：

 saveDone : {
    on : {
      '' : [
        {
        target: 'fetchSchooldays',
        cond: 'dateChange',
      },
        { target : '#idle'}
      ]
    }

  },

我希望我可以檢測到這個 state 並觸發我的事件，如果我刪除 {target: '#idle'} 我可以，但是我永遠不會在根目錄中點擊 #idle。 如果 {target: '#idle'} 存在，它似乎只是跳過了這個 state。

Answer 1

您可以在actions: []數組中添加一個動作（可以是單個值或數組）：

onDone: [
  {
    // ...
    actions: ['setKursus', () => { console.log('hi') }]
  },
  // ...
]

解釋機也可以監聽到 state 的變化：

const service = interpret(machine).start();

service.subscribe(state => {
  console.log(state);
});