[英]Spawning children machines in xstate
我目前正在使用 xstate 開發一個應用程序,我有一台父計算機生成兩個不同的子計算機,子計算機對不同的 API 端點進行提取,並且它們都根據狀態向父計算機發送解決或拒絕事件在 API 調用中,我需要有關如何確保在轉換到父計算機上的空閑 state 之前完成所有提取的幫助。
取機:
const fetchMachine: FetchMachine =(
fetchFunction
) => (
{
id: 'fetch',
initial: States.Initialize,
context: {
response: null,
error: null
},
states: {
[States.Initialize]: {
on: {
'FETCH.REQUEST': {
target: States.Pending,
}
}
},
[States.Pending]: {
invoke: {
src: 'fetch',
onDone: {
target: States.Success,
actions: ['updateResponse']
},
onError: {
target: States.Failure,
actions: ['updateError']
}
},
},
[States.Success]: {
entry: ['fetchSuccess'],
on: {
'FETCH.REQUEST': States.Pending
}
},
[States.Failure]: {
entry: ['fetchFailure'],
on: {
'FETCH.REQUEST': States.Pending
}
}
}
}
上面的機器將事件的請求發送回父級。
現在的問題是父機器並行使用這台機器,我需要幫助來確保在轉換到父機器上的空閑 state 之前完成所有提取。
理想情況下,您會使用最終的 state來處理這種情況,它位於文檔中。
我已經在可視化器中重新創建了您的機器,具有並行狀態,每個狀態都有一個最終的 state 以顯示它將如何轉換。
為了完整起見,這是最終機器的代碼:
const parentMachine = Machine({
id: 'your_id_here',
initial: 'pending',
states: {
pending: {
on: { CHANGE_EVENT: 'process' }
},
process: {
type: 'parallel',
states: {
fetchMachine1: {
initial: 'initialize',
states: {
initialize: {
on: {
'FETCH.REQUEST': {
target: 'pending',
}
}
},
pending: {
invoke: {
src: 'fetch',
onDone: {
target: 'success',
actions: ['updateResponse']
},
onError: {
target: 'failure',
actions: ['updateError']
}
},
},
success: {
entry: ['fetchSuccess'],
on: {
'FETCH.REQUEST': 'pending'
},
type: 'final' // 'success' is a final state node for 'fetchMachine1'
},
failure: {
entry: ['fetchFailure'],
on: {
'FETCH.REQUEST': 'pending'
}
}
}
},
fetchMachine2: {
initial: 'initialize',
states: {
initialize: {
on: {
'FETCH.REQUEST': {
target: 'pending',
}
}
},
pending: {
invoke: {
src: 'fetch',
onDone: {
target: 'success',
actions: ['updateResponse']
},
onError: {
target: 'failure',
actions: ['updateError']
}
},
},
success: {
entry: ['fetchSuccess'],
on: {
'FETCH.REQUEST': 'pending'
},
type: 'final' // 'success' is a final state node for 'fetchMachine1'
},
failure: {
entry: ['fetchFailure'],
on: {
'FETCH.REQUEST': 'pending'
}
}
}
}
},
onDone: 'pending'
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.