reduxステップワークフロー

Question

私はステップワークフローを持っています。まず、あなたは、それから、スナップショットを選択し、...

class RestorePage extends Component { 
    componentDidMount() { 
     const { system_id: systemId } = this.props.params; 
     const { setStep, fetchSystem } = this.props; 
     const { query } = this.props.location; 

     if (!query.zfbrowser_restore) { 
      fetchSystem(systemId); 
      setStep(STEPS.SELECT_TASK); 
     } else { 
      setStep(STEPS.RESTORE_FORM); 
     } 
    } 

    render() { 
     const { step, isLoadingSystem } = this.props; 

     return (
      <div> 
       <h1 className="__page-title" data-ztest="restore_title">Restore</h1> 
       {(() => { 
        if (isLoadingSystem) { 
         return (<Spinner>Loading System...</Spinner>); 
        } 

        switch (step) { 
         case STEPS.SELECT_TASK: 
          return <Tasks />; 
         case STEPS.SELECT_SNAPSHOT: 
          return <Snapshots />; 
         case STEPS.FILE_BROWSER: 
          return <FileBrowser />; 
         case STEPS.RESTORE_FORM: 
          return <Form />; 
         default: 
          return (<div>Invalid Step</div>); 
        } 
       })()} 
      </div> 
     ); 
    } 
} 

私は（、その後のlocalStorageをして）再来の店舗でのアプリケーションの状態のステップを格納していたタスクを選択します。私は離れて移動し、戻って問題があります。それは古いステップに行く。失効した値。ステップの状態をthis.stepに移動することを考えましたが、それにはforceUpdateが必要です。私はURLの一部として反応ルータに格納することについても考えました。私はURLの変更が必要なので、それが良いアイデアになるかどうかは分かりません。各ステップにはデータの前のステップが必要です。したがって、URLを変更して元に戻すと、すべてを再度取​​得する必要があります。

初期ステップを設定する方法はありますか？私はcomponentWillUpdateでそれをやろうとしましたが、更新を取得する前に古いステップをレンダリングしています。

ありがとうございます！

Answer 1

私はステップを反応ルータに移しました。それは正常に動作するように見える