What to do with reducers?

Question

React

Guys, I've been struggling with the reducer for a day now, I still can't figure out what the problem is.
I will describe the situation again in a nutshell, there are two services (one is responsible for unloading information from the local database, the second is responsible for unloading information from the API
) the fact that these two requests are sent simultaneously, respectively, two asynchronous actions are triggered in the reducer, and one action overwrites the other, i.e. now info from the local database appears on the main one for a moment, but if you use the search (write - R2-D2, it will spit out in console result) What needs to be done to ensure that both requests work as they should?
https://codesandbox.io/s/naughty-wing-4wzu5

Answer 1

1. If these are independent lists, then why are the promoHeroes APIs overwritten after the response? If the idea is to always show info on the main page from promo, then just don't touch this field when HEROES_API_LOADED.
2. If the promo list should be updated after a request to the api, then here you can reorganize the store.
Ideally, store a normalized list of heroes. Sample structure:

const store = {
  heroes: {
    byId: { 1: { id: 1, name: 'Luke', ... }, ... },
    allIds: [1, 2, 3, ...],
  },
  promoIds: [1, 2],
}

Sometimes normalization seems redundant, and it seems that working with such a store is more difficult, but in reality it turns out to be more convenient.
Now, if the promo and api services must form one common list, then on the HEROES_API_LOADED and HEROES_PROMO_LOADED actions, these two lists must be merged into one normalized heroes storage.
Even if you don’t want to do normalization, but you need to merge two lists from different services, you will have to write some kind of merge logic.