How to resolve dependency between actions within a Store

Question

My Store registers 2 actiontypes as follows:

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

how can I assure, that loadCaris executed before loadTyres? Is there a way to wait for this depending method without having to execute loadCar everytime I want to just loadTyres?

Do you mean you want a `waitFor`: http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html — WiredPrairie, Feb 20 '15 at 11:47
I don't think that `waitFor` fits in here, as it only waits for *other* stores to update (which means it waits for all pending dispatches to being processed) — FranBran, Feb 23 '15 at 07:12
You could just have a state variable that tracks whether it has been loaded, or use a promise. — WiredPrairie, Feb 23 '15 at 11:31
even with a promise I would have to call both methods, don't I... — FranBran, Feb 23 '15 at 17:12

score 0 · Answer 1 · edited May 23 '17 at 12:28

Below is an untested pattern you might try. You'll maybe need to start dispatching a start loadcar, loadcar completed for example to complete this (see 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;
    }
})

You could also save the Promise object and cache it so that it is the "current" car and then it wouldn't be reloaded (unless you remove it from the array).

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

You'll create a function that returns a Promise that will resolve with the specifics of the car data you're loading. You'll need to do whatever you would normally do there, but eventually call the resolve or reject callbacks to properly continue the Promise chain.

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

And finally, loadTyres would use loadCar internally and only resolve itself when the tyre data has been returned.

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 */);          
        });
    });
}

How to resolve dependency between actions within a Store

1 Answers1