React Flux 从远程服务获取 Api 数据

Posted 2023-02-22

【中文标题】React Flux 从远程服务获取 Api 数据

【英文标题】：React Flux Get Api data from remote service

【发布时间】：2017-08-14 16:04:01

【问题描述】：

我正在尝试遵循 facebook 示例中的通量架构，该示例位于 https://github.com/facebook/flux/tree/master/examples/flux-todomvc

你会在哪里调用你的 api 来从远程服务获取数据？

AppContainer 有一个 getState 方法，可以获取商店的初始状态。这将为空，因为数据库调用尚未发生。我可以在动作创建者中进行 api 调用。但是我在哪里触发这个动作？

AppContainer.js

function getStores() 
    return [
        TodoStore
    ];


function getState() 
  return 
    todos: TodoStore.getState()
  ;

【参考方案1】：

您应该创建一个动作调度程序，它会触发获取请求并以获取结果作为负载来调度动作。通过mapDispatchToProps 处理此动作调度程序，并通过componentDidMount 循环方法在您的组件内调用它。

【讨论】：

这就是我最终要做的。我创建了一个***组件并在那里启动操作。 mapDispatchToProps 是 redux 对吗？

【参考方案2】：

你应该创建 Actions 类，它会有方法。这个方法会派发action来存储，并发送ajax数据。

Actions 类方法的一个示例：

changeCurrent(role: string): void 
    // Things to do right now
    dispatch(RolesActionID.ROLES_CHANGE_CURRENT, 
        role: role
    );

    let props: any =  Role: role ;
    let data: any = formAjaxData("GetPrivileges", props, true);

    // Send ajax
    let post: any = $.post( url: "/v1/json", data: data, contentType: "text/html; charset=utf-8" )
        .done(function (result: string): void 
            dispatch(RolesActionID.ROLES_CHANGE_CURRENT_SUCCESS, 
                rolePrivileges: result,
                role: role
            );
        )

        .fail(function (result: any): void 
            // Fail actions
        );
;

所以实际上您将有 2-3 个已调度的事件：

动作开始时（我们可以禁用 SUBMIT 按钮进行 expl） 当我们得到成功的 ajax 响应时 当我们收到失败的 ajax 响应时（不要忘记再次启用 SUBMIT 按钮）

【讨论】：

这就是我最终要做的。虽然我无法在一个动作中进行多次调度。我收到一条错误消息，提示您在另一个调度正在进行时无法进行调度。

这可能是，如果您在“StoreClass”中执行此方法。最后你应该有 2 个类： 1. NameStore； 2. NameActions； NameStore - 它是一个，注册到 AppDispatcher，并正在等待调度的动作（你不能在这里调度另一个动作） NameActions - 它是一个单独的类，它仅用于调度动作和发送 ajax。