React Flux - 来自通量调度器/商店的返回值

IT技术 reactjs typescript dependencies promise flux
2021-05-23 06:03:02

我正在使用通量模式和通量调度程序。在创建新的 TextItem 后，我需要将“TextStore”中的值返回给操作，因为我需要在另一个商店中引用它。这是我想要做的一个非常简单的版本：

// stores.ts
var TextStore = {
    add(){
        // here I want to return a new ID
        return createRandomID();
    }
    ...
}
var ModuleStore = {
    labelTextID; // refers to `id` on Text
    ...
}


// moduleactions.ts
...
import PageActions from './PageActions';
var ModuleActions = {
    add: function (module) {
        var textID = PageActions.add(); // here I need to get the ID of the newly create `Text`
        module.labelTextID = textID;
        Dispatcher.dispatch({
            action: 'ADD_MODULE',
            module: module
        })
    },
    ...
}

现在，当我Module通过调度动作添加一个新的时，我也想创建一个新的Text，并在之前从商店返回它新创建的 ID。

最明显的方法是要求TextStore内部ModuleActions并add()直接调用。这是否违反了通量模式？

有没有办法做到这一点，也许是通过Promise？通过调度程序向商店发送回调不起作用，因为在另一个调度未完成时我无法调度。

如果你们能帮助我，那就太好了！

2个回答

直接调用 Store 的方法是 Flux 的一种反模式。如果你直接打电话，TextStore.add()那么你没有遵循

Action -> Dispatcher -> Store --> View --> Action 循环。

在不断变化中，数据应始终在action. 当数据的生成过程是 aync 时，这更有意义。在您的情况下，您能够解决这个问题，因为数据的生成不是异步的。您直接在 TextStore 中生成数据，然后担心如何返回该值。

在您的情况下id，如果它是异步后端事件，则在操作中生成操作，然后将其传递id给TextStorevia 调度程序，然后还将相同的 id 传递给ModuleStorevia 调度程序。

var ModuleActions = {
    add: function (module) {
        var textID = new Date().getTime(); // this is the CHANGE i added
        PageActions.add(textID); 
        module.labelTextID = textID;
        Dispatcher.dispatch({
            action: 'ADD_MODULE',
            module: module
        })
    }
}

您还可以将其分解为更小、更具体的操作。我保持原样，这样我就可以突出显示您应该更改的一行。

有没有办法做到这一点，也许是通过Promise？通过调度程序向商店发送回调不起作用，因为在另一个调度未完成时我无法调度。

您可以PageActions.add();在调度之前进行异步调用ModuleActions.add并将返回值作为参数传递给ModuleActions.add

其它你可能感兴趣的问题
上一篇React + Firebase 组件不会在数据更改时重新渲染（删除） 下一篇如何将图像从 JSON 检索到 React？