javascript - React Flux - 无法在调度中间调度

Question

我有一个包含列表的下拉菜单。单击列表后，它会显示在页面另一侧的表格中。

每当创建一个新列表时，我想像单击它一样显示它(如下面的代码所示)。但是，为了将其显示在表中，我需要调用ListAssignmentsStoreActions.loadListAssignments(list);。

handleClick: function() {
    var list = this.props.data;
    ListAssignmentsStoreActions.loadListAssignments(list);
},

//invoked after initial rendering
componentDidMount: function() {
    var loadAssignmentsForList = this.props.loadAssignmentsForList;
    console.log("Name " + this.props.data.name);
    if(loadAssignmentsForList){
        this.handleClick();
    }
}

问题是我得到:

 error = Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. at invariant

除了调用操作之外，我不知道如何显示列表。

Answer 1

我相信你弄错了 Flux。

当您在下拉列表中选择一个列表时，您会分派(dispatch)一个操作，例如 ListSelectedAction，它有一个保存列表 ID 的属性。

您应该有一个 Store，例如 ListStore，它在调度程序上注册一个监听器/回调，监听 ListSelectedAction。 ListStore 更新其属性之一，例如 currentList，其列表 ID 包含在 ListSelectedAction 中，并发出一个事件，例如 LIST_CHANGED

Table 组件监听 LIST_CHANGED 事件(而非操作)，并在接收到该事件时，从 ListStore 读取 currentList id。 (ListStore 作为 prop 传递给 Table)

总而言之， 下拉菜单 -> ListSelectedAction -> ListStore -> LIST_CHANGED -> 表

新按钮的处理方式相同

新按钮 -> NewListAction -> ListStore -> List_CHANGED -> 表格