Asynchronous Flux — Getting Data from an API

Once you understand the basics of the React/Flux relationship, it’s time to add asynchronous API management. This will enable the data collection needed for larger web applications through a standard pattern. In the previous post, I walked through a Todo app example in order to conceptualize the process of connecting Flux to a React view. In this post, I will add an API call to bring external data into the app. I will be following the example outlined by Facebook in their Flux Chat app.

To conceptualize, it helps to remember that the premise behind the Action-Dispatcher-Store model is one-way data flow.

This data flow is controlled by calling actions to initialize state changes which flow through the dispatcher to the stores. This means that user events in a view and the return of an API call are both updating the application state by calling an action to start the update process. Consequently, in this example, it makes sense to add actions for the start and the return of my API call. I’ll also abstract the logic of the API into a utility file instead of handling it directly in a view or action.

Create New Constants

First, I need to define the new constants that will represent the state changes for my API call. Since I want to keep this simple and focus on the architecture, I’ll just have one API call with the following two new constants: GET_RANDOM and GET_RANDOM_RESPONSE. I arbitrarily chose to use the Random User Generator as my API because it’s a simple data source and doesn’t require any signup or authentication.

Define the Actions

Second, I need to define my new actions. The first action will be the clicking of the “Get Random” button which initiates the API call. The second action will be handling the return of the API call. I’m going to follow the convention of separating the API return action into a separate server actions file:

In addition, I’ll edit the existing TodoActions.js file to add the API call action. This view action will include a function call to my RandomUserAPI, which I haven’t created yet. Keep in mind, I could very easily add a parameter to pass data through the getRandom() action if I needed to send data to the API. Since this is a simple example that doesn’t require any data passed to the API, the call looks pretty bare:

Add the API Utility

Third, I want to be a good coder and separate my concerns. Therefore, I’m going to create a separate utility file to hold all of my random user API-specific logic. I’m also going to use superagent as my HTTP utility.

Add the Data to the Store

Now that I have the actions defined, I need to add the GET_RANDOM_RESPONSE action case to my TodoStore.js to have it update the store when the API call returns. I randomly chose some fields from the Random User API result to put as the task text which was easily pushed to the existing list array representing my todo list state.

Add the Action to the View

Finally, I need to add a “Random” button to the view to initiate this entire process. Since I don’t have a fancy mock-up to follow, I’ll just add a duplicate button underneath the existing one. In addition, I’ll change the onClick event handler to call the new getRandom() action I created earlier. The ease by which this new action can be implemented is a great example of the power and simplicity of using and maintaining React for your views.

You can see the full app on GitHub.

Conclusion

Once you have a Flux architecture in place, it becomes very straightforward to add external API calls to your web application. The points to remember are documenting your asynchronous send and receive events with constants, adding actions for each constant, separating external API logic for easy maintenance, updating the stores with the new state, and calling your actions directly from your views/components. Hopefully, this brief overview has helped you better understand how to manage external data in a Flux/React application architecture.

If you found this post helpful, please feel free to share it!