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

Question

我正在尝试遵循 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()
  };
}

Answer 1

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

Answer 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 个已调度的事件：

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