React/Flux:从组件的渲染方法中触发一个动作，或者从组件中执行一个Rest调用

React/Flux: Firing an action from a render method of an component or doing a Rest call from a component?

本文关键字：一个 组件 调用 Rest 执行 或者 Flux 方法 React      更新时间：2023-09-26

我有一个按钮在我的组件将导出json对象，以便用户可以下载它?要获得JSON，我必须进行REST调用以获得JSON，然后我这样做

    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. 我应该如何在Flux中适应这个?我是否应该触发一个动作创建器，它将下载json，然后更新一个FileDownload组件将侦听的存储。组件将触发上述代码，但随后它必须在其呈现方法中触发一个动作，以将存储设置为value为空?
  2. 从一个组件的渲染方法触发动作，是正确的方式吗?
  3. 既然这不会从我的应用程序流任何数据，我应该只是使用React组件来获取这个JSON和弹出下载?这将使组件执行REST调用。
  4. 而不是3，触发一个动作创建器，它将获取JSON并弹出下载?在本例中，我将在操作创建器中编写上述代码。

首先，为什么不直接从API服务器触发下载呢?

:

  1. 我应该如何在Flux中适应这个?我是否应该启动一个动作创建器它将下载json然后更新某个存储到哪个FileDownload组件将监听。组件将触发上面的代码，但它必须在它的渲染方法中触发一个动作将存储设置为value为空?

如果该组件的唯一目的是触发下载，那么您可能不需要其中的组件。如果以下选项不可用，我可能会在动作创建器回调中处理

  • 从一个组件的渲染方法触发动作，是正确的方式吗?
    •

    。通常，建议您对大多数会影响组件呈现的操作使用componentWillMount。

  • 因为这不会从我的应用程序中流任何数据，我应该使用React组件来获取这个JSON并弹出下载吗？ 这将使组件执行REST调用。
    •

    我假设这指的是从你的API服务器触发下载?如果是这样，我会使用这种方法。UI不需要关心如何格式化下载的文件。

  • 而不是3，触发一个动作创建器，它将获取JSON并弹出下载?在这种情况下，我将编写上面的代码
    •

    如果选项3是可用的，那么我不认为这样做有任何好处。选择最简单和最不强大的解决方案。

    相关文章：