如何解决商店内操作之间的依赖关系答案

【问题标题】：How to resolve dependency between actions within a Store如何解决商店内操作之间的依赖关系
【发布时间】：2015-04-22 00:34:07
【问题描述】：

My Store 注册了 2 个 actiontype 如下：

Dispatcher.register(function (action) {
    switch (action.type) {
        case 'loadCar':
            loadCar();
            break;
        case 'loadTyres':
            loadTyres();
            break;
    }
})

我如何保证 loadCar 在 loadTyres 之前执行？有没有办法等待这个依赖方法，而不必每次我只想loadTyres 时执行loadCar？

【问题讨论】：

你的意思是你想要一个waitFor:facebook.github.io/react/blog/2014/07/30/…
我认为 waitFor 不适合这里，因为它只等待 other 商店更新（这意味着它等待所有待处理的调度被处理）
你可以只使用一个状态变量来跟踪它是否已被加载，或者使用一个承诺。
即使承诺我也必须调用这两种方法，不是吗...
carpromise.then(loadTyres()) 例如...？

标签： javascript reactjs reactjs-flux

【解决方案1】：

以下是您可以尝试的未经测试的模式。例如，您可能需要开始发送 start loadcar、loadcar completed 来完成此操作（请参阅 here）。

// pick your favorite Promise library
var Promise = require('bluebird'); 

Dispatcher.register(function (action) {
    switch (action.type) {
        case 'loadCar':
            // need to be async here
            loadCar(action.carId).then(function(car) {
                // this eventually returns                      
            });
            break;
        case 'loadTyres':
            // need to be async here
            loadTyres(action.carId).then(function(tyres) {

            })
            break;
    }
})

您还可以保存 Promise 对象并将其缓存，使其成为“当前”对象 car 然后它不会被重新加载（除非你从数组中删除它）。

var allCars = {};
function loadCar(id) {
    if(typeof allCars[id] === 'undefined') {
        allCars[id] = loadCarPromise(id);
    }
    return allCars[id];
}

您将创建一个返回 Promise 的函数，该 Promise 将使用您正在加载的 car 数据的细节进行解析。你需要做你通常在那里做的任何事情，但最终调用 resolve 或 reject 回调以正确地继续 Promise 链。

function loadCarPromise(id) {
    return new Promise(function(resolve, reject) {
        // do whatever you do to get
        // the car
        // when it's done, call resolve
        // or reject if there is a failure.
        // ex:
        $.ajax({
            url: 'api/car/' + id,
            success: function(data) {
                resolve(data);
            },
            error: function(err) {
                reject(err);
            }
        });
    });
}

最后，loadTyres 将在内部使用loadCar，并且仅在返回轮胎数据时自行解析。

function loadTyres(carId) {
    // the car is always loaded first, then the tyres
    // but if using the cache, the car will be
    // returned immediately (although you won't need
    // to worry about that)
    return loadCar(carId).then(function(car) {
        return new Promise(function(resolve, reject) {
            // do something to load the tyres
            // with the car info that was returned
            resolve(/* tyres data */);          
        });
    });
}

【讨论】：