Track ajax request status in a Flux app

We are reorganizing the large Backbone application to use Flux to help solve some of the problems with tight communications and events / data streams. However, we have not yet figured out how to handle cases where we need to know the status of a specific ajax request

When the controller component requests some data from the stream store and this data has not yet been loaded, we run an ajax request to retrieve the data. We dispatch one action when initiating a request, and another - about success or failure.

This is enough to load the correct data and update stores after downloading the data. But we have some cases where we need to know if any ajax request is waiting or completed - sometimes just to display the counter in one or more views, or sometimes to block other actions before loading the data.

Are there any patterns that people use for this behavior in flux / react applications? Here are a few approaches that I reviewed:

  • Have a query status repository that knows if there is a pending, completed, or failed request of any type. This works well for simple cases, such as "is there a training request waiting for a request", but it becomes difficult if we want to get a more detailed "is there a waiting training request for training ID 123

  • All stores monitor whether pending data requests are expected or not, and return status data as part of the api repository β€” that is, WorkoutStore.getWorkout will return something like {status: 'pending', data: {}}. The problem with this approach is that it seems that this state should not be mixed with domain data, as this is really a separate issue. In addition, now every user of the training api store should process this "response with status", and not just the corresponding domain data

  • Ignore the status of the request - either the data is there, or the controller / view acts on it, or there is no data, and the controller / view does not act on it. Simpler, but probably not enough for our purposes

+4
source share
1

, , .

# 3 , React , , .

, , . , , . , # 1.

, , , this.state. , , , ID . , . RequestStore .

, , , ( ) . , , , .

, Facebook, . . , . , .

+3

All Articles