React Flux-助焊剂分派器/存储的返回值 [英] React Flux - Return value from flux dispatcher / store

问题描述

我正在使用 flux-pattern 和流量分配器。创建新的TextItem之后，我需要将 TextStore中的值返回给操作，因为我需要在其他商店中引用它。
这是我想做的一个非常简单的版本：

I am using the flux-pattern and the flux dispatcher. I need to return a value from 'TextStore' to an action after creating a new TextItem because I need to reference it in another store. Here is a very simple version of what I want to do:

// 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。

Now when I add a new Module via dispatching an action, I want to create a new Text as well and return its newly created ID from the store before.

最明显的方法是在 ModuleActions TextStore $ c>并直接调用 add（）。

The most obvious way would be to require the TextStore inside ModuleActions and call add() directly. Is that against the flux-pattern?

有没有办法实现这一目标，也许有希望吗？通过调度程序将回调发送到商店不起作用，因为在另一次调度未完成时我无法调度。

Is there any way to accomplish that, maybe with promises? Sending callbacks via the dispatcher to the store doesnt work, because I cannot dispatch while another dispatch is unfinished.

如果你们能帮助我，那将是很棒的事情！

Would be great if you guys can help me!

推荐答案

直接调用Store的方法是Flux的反模式。如果您直接调用 TextStore.add（），则您没有遵循

Calling the Store's method directly is an anti-pattern for Flux. If you directly call TextStore.add() then you are not following the

操作->调度程序->商店->查看->操作周期。

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

In flux, the data should always generate in the action. This makes more sense when the process of generation of data is aync. In your case you were able to get around this because generation of data is not async. You are directly generating the data in the TextStore and then worrying about how to return that value.

对于您而言，在操作中生成 id 就像在异步后端事件中一样，然后通过调度程序将该 id 传递给 TextStore ，然后将相同的ID传递给 ModuleStore 通过调度程序。

In your case generate the id in the action as you would have done if it was an async backend event, then pass that id down to the TextStore via dispatcher and after that also pass the same id to the ModuleStore via the dispatcher.

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
        })
    }
}

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

You could also break this down into further smaller, more specific actions. I kept it as-is so I could highlight the one line you should change.

这篇关于React Flux-助焊剂分派器/存储的返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！