2016-11-15 62 views
0

我的組件上有一個按鈕,它將導出對象的json,以便用戶可以下載它?要獲得JSON我將不得不做出一個REST調用來獲取JSON,然後我做這個React/Flux:激發組件的渲染方法中的動作或從組件執行Rest調用?

var definitionJson = JSON.stringify(definition); 
    var definitionName = definition.name 
    var exportedFileName = definitionName.concat(".json"); 
    var file = new Blob([definitionJson], { type: 'application/json' }); 

    //needed for IE10 
    if (window.navigator && window.navigator.msSaveBlob) { 
     window.navigator.msSaveBlob(file, exportedFileName); 
    } 
    else { 
     var a = document.createElement("a"); 
     a.href = URL.createObjectURL(file); 
     a.setAttribute("download", exportedFileName); 
     a.click(); 
    } 

我有一些問題: -

  1. 我應該如何適應這種變動中的?我應該發佈一個動作創建器,它將下載json,然後更新FileDownload組件將要偵聽的某個存儲。該組件將觸發上述代碼,但它必須在其渲染方法中觸發一個動作,以將該存儲設置爲空值?
  2. 是否從組件的渲染方法觸發操作,正確的方法?
  3. 由於這不會從我的應用程序流動任何數據,我應該只使用React組件來獲取此JSON並將其彈出下載?這將使組件進行REST調用。
  4. 而不是3,發起一個動作創建器,它將獲取JSON並將其彈出下載?在這種情況下,我會將上面的代碼寫入動作創建器。

回答

1

首先爲什麼不直接從API服務器觸發下載?

回答您的問題:

  1. 我應該如何適應這種變動中的?我應該發佈一個動作創建器,它將下載json,然後更新某個商店,FileDownload組件將收聽這些商店。該組件將觸發 上面的代碼,但它必須在其渲染方法中觸發一個動作爲 將商店設置爲空值?

如果該組件的唯一目的是觸發下載,你也許並不需要從一個組件。我可能會處理,在行動的創建者回調,如果波紋管選項不avaialble

從組件,以正確的方式的渲染方法
  • 是擊發動作?
  • 號通常要使用componentWillMount爲將影響組件的呈現最多的操作它的建議。

  • 因爲這不會從我的應用程序流的任何數據,我應該只使用做出反應組件來獲取這個JSON和流行起來下載 ?這將使組件進行REST調用。
  • 我認爲這是指觸發從您的API服務器下載?如果是的話,我會用這種方法。 UI不需要關心如何格式化文件進行下載。

    1. 而不是3,發動一個動作創建器,它將獲取JSON並將其彈出下載?在這種情況下,我會在動作創建器中寫上述代碼 。

    如果選項3可用,那麼我沒有看到這樣做的好處。只需選擇最簡單,功能最少的解決方案。