什么是一个好的 redux-saga 模式来引导一个在启动时下载数据的应用程序

Question

我有一个网络应用程序，它首先加载需要 1-10 秒的数据。

我会在应用启动后立即显示完整的 UI（地图），然后在后台开始下载。

在下载数据时，我想延迟一些效果，例如显示路线和搜索结果）。

任何在数据加载时去抖动的动作（比如用户输入搜索词）都会在数据加载之后执行。

所以：

App Starts 
      forks data download in background 
        shows UI
        lets user type -> debounce --> execute only after data has downloaded
         show more (route etc.) once download is complete

我们如何在 saga 中做到这一点 - 我认为这是完成此类任务的最强大的框架。我不认为这是标准模式之一，但我认为它会很常见。

Answer 1

这样的事情怎么样：

function* fetchInitData(){}

function* setupLocale(){} 

function* submit(value){
   while(yield !select(state=>state.started)){
       yield delay(100);
   }
   yield call(fetch,...)
}
function* startSaga(){
   yield all[
      call(fetchInitData),
      call(setupLocale),
      delay(3000) // Wait at least 3 seconds
   ]
   yield put({
      type: "APP_STARTED",
   });    
}

只需使用 {started:false} 初始化您的 redux 商店应用程序并减少 APP_STARTED 操作。