GSoC Week 7: Flags

3 min readJul 18, 2019

--

In this week of GSoC we take a look at building the Flags component and what it took to get there (Hint: it’s Redux)

We need Redux — But why?

Unlike other components like Tags or Priorities, Flag is a bit of tricky one. Flag loads both Tag and Priority data and asks the user which Tags or Priority he or she wants to be associated with a particular Flag.

This reuse of data poses some design & optimization challenges —

I want to reduce the number of API Calls as far as possible.
Every time I reload a tab, I don’t want there to be an API per reload.
If I’ve already opened the Tag or Priority tabs once, it has already made API calls to fetch the Tag or Priority data. I don’t want to make another 2 API calls to display available Tags or Priorities when adding a new Flag.
I want to create a common store so that I can reuse Tag and Priority data effectively in Flags component, which is far apart from Tag and Priority nodes in the app tree.

All these requires necessitated the use of Redux in our application.

Let’s have a look at our project structure after introducing actions, reducers, and putting it altogether via combineReducers in our main reducers.js file, created automatically when using the Yeoman generator to create our OpenMRS React OWA project.