Managing simultaneous asynchronous updates to the local state

Question

Managing simultaneous asynchronous updates to the local state

There is a scenario where a series of asynchronous calls are made that read from a local state S, perform certain computations based on its current value, and return an updated value of the local state S'.

All these operations occur at runtime, with limited control over their order. Here is a simplified representation:

type State = {
  state: number
}

let localState: State = {
  state: 1000
}

const promiseTimeout = (time: number, value: number) => () => new Promise(
    (resolve: (n: number) => void) => setTimeout(resolve, time, value + time)
  );


const post: (n: number, currentState: State) => Promise<void> = (n, c) => promiseTimeout(n, c.state)()
  .then(res => {
    localState.state = res
    console.log(localState)
  })

post(1000, localState); // initial value of localState is 1000
post(3000, localState); // initial value of localState is still 1000
// when both promises resolve, the final value of localState will be 4000 instead of 5000

Playground link

This model clearly has an issue, as both calls to post are reading the same value of localState when they should be executed sequentially.

If all calls were determined at compile time, the solution would involve chaining promises like this:

post(1000, localState)
  .then(() => post(3000, localState)) // localState at call time becomes 2000

What would be the approach to fix this situation?

javascript typescript asynchronous

Answer 1

Answer №1

To create a more efficient solution, consider having the post function interact with a promise instead of directly manipulating the state object. This promise can be stored within the state object itself and initialized as fulfilled with the current state. The post function can then update it like so:

const post = (n, state) => {
    return state.promise = state.promise
        .then(state => {
            // ...perform necessary operations to modify the `state`...
            return state;
        }));
};

Below is an example written in JavaScript using asyncAction, which functions similarly to your promiseTimeout but without returning an immediately invoked function:

"use strict";

let localState = {
    state: 1000
};
localState.promise = Promise.resolve(localState);

const promiseTimeout = (time, value) => () => new Promise((resolve) => setTimeout(resolve, time, value + time));
  
const post = (n, state) => {
    return state.promise = state.promise
        .then(state => promiseTimeout(n, state.state)().then(newValue => {
            state.state = newValue;
            console.log(state.state);
            return state;
        }));
};

console.log("Running...");
post(1000, localState); 
post(3000, localState);

By synchronously replacing the promise with each call to post, a chain is established through successive calls.

The TypeScript version of this code is available here.

type State = {
  state: number,
  promise: Promise<State>
};

let localState: State = (() => {
    const s: Partial<State> = {
        state: 1000
    };
    
    s.promise = Promise.resolve(s as State);
    return s as State;
})();

const promiseTimeout = (time: number, value: number) => () => new Promise(
    (resolve: (n: number) => void) => setTimeout(resolve, time, value + time)
);

const post = (n: number, state: State): Promise<State> => {
    return state.promise = state.promise
        .then(state => promiseTimeout(n, state.state)().then(newValue => {
            state.state = newValue;
            console.log(state.state);
            return state;
        }));
};

console.log("Running...");
post(1000, localState); 
post(3000, localState);

It's important to note that when dealing with states that may change asynchronously, it's beneficial to create a fresh state object rather than modifying the existing one - treating the state as immutable can prevent unintended side effects.

Answer 2

To create a more efficient solution, consider having the post function interact with a promise instead of directly manipulating the state object. This promise can be stored within the state object itself and initialized as fulfilled with the current state. The post function can then update it like so:

const post = (n, state) => {
    return state.promise = state.promise
        .then(state => {
            // ...perform necessary operations to modify the `state`...
            return state;
        }));
};

Below is an example written in JavaScript using asyncAction, which functions similarly to your promiseTimeout but without returning an immediately invoked function:

"use strict";

let localState = {
    state: 1000
};
localState.promise = Promise.resolve(localState);

const promiseTimeout = (time, value) => () => new Promise((resolve) => setTimeout(resolve, time, value + time));
  
const post = (n, state) => {
    return state.promise = state.promise
        .then(state => promiseTimeout(n, state.state)().then(newValue => {
            state.state = newValue;
            console.log(state.state);
            return state;
        }));
};

console.log("Running...");
post(1000, localState); 
post(3000, localState);

By synchronously replacing the promise with each call to post, a chain is established through successive calls.

The TypeScript version of this code is available here.

type State = {
  state: number,
  promise: Promise<State>
};

let localState: State = (() => {
    const s: Partial<State> = {
        state: 1000
    };
    
    s.promise = Promise.resolve(s as State);
    return s as State;
})();

const promiseTimeout = (time: number, value: number) => () => new Promise(
    (resolve: (n: number) => void) => setTimeout(resolve, time, value + time)
);

const post = (n: number, state: State): Promise<State> => {
    return state.promise = state.promise
        .then(state => promiseTimeout(n, state.state)().then(newValue => {
            state.state = newValue;
            console.log(state.state);
            return state;
        }));
};

console.log("Running...");
post(1000, localState); 
post(3000, localState);

It's important to note that when dealing with states that may change asynchronously, it's beneficial to create a fresh state object rather than modifying the existing one - treating the state as immutable can prevent unintended side effects.

Answer 3

Answer №2

Encountering a recurring issue, I devised a solution by implementing a queue class that ensures Promise execution in mutual exclusion, which I named PromiseQueue:

class PromiseQueue {
    constructor() {
        this._queue = new Array(); // Alternatively, a LinkedList for improved performance
        this._usingQueue = false;
    }

    /**
     * Adds an element to the queue and initiates its processing. It resolves upon successful promise execution.
     *
     * @param {Promise<any>} promise
     */
    add(promise) {
        const self = this;
        return new Promise((resolve, reject) => {
            const promiseData = {
                promise,
                resolve,
                reject,
            };
            self._queue.push(promiseData);
            self._runQueue();
        });
    }

    async _runQueue() {
        if (!this._usingQueue && this._queue.length > 0) {
            this._usingQueue = true;
            const nextPromiseData = this._queue.shift();
            const { promise, resolve, reject } = nextPromiseData;
            try {
                const result = await promise();
                resolve(result);
            } catch (e) {
                reject(e);
            }
            this._usingQueue = false;
            this._runQueue();
        }
    }
}

Utilization of this class would resemble the following (no testing conducted):

const myPromiseQueue = new PromiseQueue();

// By leveraging this structure, the second post is guaranteed to execute only after completion of the first.
myPromiseQueue.add(async() => await post(1000, localState));
myPromiseQueue.add(async() => await post(3000, localState));

Answer 4

Encountering a recurring issue, I devised a solution by implementing a queue class that ensures Promise execution in mutual exclusion, which I named PromiseQueue:

class PromiseQueue {
    constructor() {
        this._queue = new Array(); // Alternatively, a LinkedList for improved performance
        this._usingQueue = false;
    }

    /**
     * Adds an element to the queue and initiates its processing. It resolves upon successful promise execution.
     *
     * @param {Promise<any>} promise
     */
    add(promise) {
        const self = this;
        return new Promise((resolve, reject) => {
            const promiseData = {
                promise,
                resolve,
                reject,
            };
            self._queue.push(promiseData);
            self._runQueue();
        });
    }

    async _runQueue() {
        if (!this._usingQueue && this._queue.length > 0) {
            this._usingQueue = true;
            const nextPromiseData = this._queue.shift();
            const { promise, resolve, reject } = nextPromiseData;
            try {
                const result = await promise();
                resolve(result);
            } catch (e) {
                reject(e);
            }
            this._usingQueue = false;
            this._runQueue();
        }
    }
}

Utilization of this class would resemble the following (no testing conducted):

const myPromiseQueue = new PromiseQueue();

// By leveraging this structure, the second post is guaranteed to execute only after completion of the first.
myPromiseQueue.add(async() => await post(1000, localState));
myPromiseQueue.add(async() => await post(3000, localState));

Answer 5

Answer №3

I do not have any previous experience with TypeScript, so the responsibility of conversion falls upon you.

One suggestion would be to implement a queue method in your state object that takes a callback as its parameter. If the callback function returns a promise, the queue will wait for it to resolve before executing the next item. Otherwise, it will move on to the next item immediately.

function createQueue() {
  var promise = Promise.resolve();
  return function (fn) {
    promise = promise.then(() => fn(this));
    return promise;
  };
}

const localState = { state: 1000, queue: createQueue() };

const timeout = (...args) => new Promise(resolve => setTimeout(resolve, ...args));
const promiseTimeout = (time, value) => timeout(time, value + time);

const post = (time, state) => state.queue(() => {
  return promiseTimeout(time, state.state).then(result => {
    state.state = result;
    console.log(state.state);
  });
});

post(1000, localState).then(() => console.log("post 1000 complete"));
post(3000, localState).then(() => console.log("post 3000 complete"));

Answer 6

I do not have any previous experience with TypeScript, so the responsibility of conversion falls upon you.

One suggestion would be to implement a queue method in your state object that takes a callback as its parameter. If the callback function returns a promise, the queue will wait for it to resolve before executing the next item. Otherwise, it will move on to the next item immediately.

function createQueue() {
  var promise = Promise.resolve();
  return function (fn) {
    promise = promise.then(() => fn(this));
    return promise;
  };
}

const localState = { state: 1000, queue: createQueue() };

const timeout = (...args) => new Promise(resolve => setTimeout(resolve, ...args));
const promiseTimeout = (time, value) => timeout(time, value + time);

const post = (time, state) => state.queue(() => {
  return promiseTimeout(time, state.state).then(result => {
    state.state = result;
    console.log(state.state);
  });
});

post(1000, localState).then(() => console.log("post 1000 complete"));
post(3000, localState).then(() => console.log("post 3000 complete"));

Managing simultaneous asynchronous updates to the local state

Answer №1

Answer №2

Answer №3

Similar questions

Executing a component's function from a JavaScript file

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

Modifying the chart width in Chart.js: A step-by-step guide

Transfer sound data blob to server and store it as a file

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

Deliver varied asset routes depending on express js

Using jQuery, remove any white spaces in a textbox that are copied and pasted

jQuery Form Validator: requiring double submission

Can you show me the method to retrieve the value of client.query in Node JS using PG?

What steps should I take to create this animation?

What is the best method for saving HTML form data into a Node JS variable?

The button fails to log any text to the developer console

Issue creating a JWT using jsonwebtoken module in Node.js

What is preventing jQuery UI from detecting jQuery?

"Enhance your audio experience across all browsers with the revolutionary

"Upon querying with an AJAX POST request, the return value was

Issue with Custom Directive: Receiving Token Error for Expression in Isolated Scope in Angular

Customized slider in jQuery UI allowing users to select height using a scaled ruler

ClickAwayListener's callback function stops executing midway

Running a function following several iterations of angular.forEach