透過 Step Graph 管理步驟處理的狀態

const steps = ['search', 'loading', 'confirm', 'submit']

const [stepIndex, setStepIndex] = useState(0)
const currentStep = steps[stepIndex]

const nextStep = () => {
    steStepIndex(prev => prev + 1)
}
const prevStep = () => {
    steStepIndex(prev => prev - 1)
}

上方的例子當狀況複雜時，會難以進行管理。例如通常會希望在 confirm 過後就不能回去前一個步驟了，或是 confirm 步驟應該回去到 search 的步驟等，以原本的寫法會造成需要許多的額外邏輯進行處理。

透過建立 Step Graph 可以透過圖的方式將每個步驟可以怎麼走描述出來，也容易的進行管理。

const stepGraph = {
    search: {
        next: 'loading',
    },
    loading: {
        next: "confirm"
    },
    confirm: {
        prev: "search",
        next: "submit"
    },
    submit: {
        prev: "confirm"
    }
}

const [currentStep, setCurrentStep] = useState('search')

const nextStep = () => {
    setCurrentStep(stepGraph[currentStep].next)
}

const prevStep = () => {
    setCurrentStep(stepGraph[currentStep].prev)
}