How to maintain global states created dynamically

Question

I am trying to Display list of items with then name and button to download its respective file Same list are available in different other screens. When I click on download

1. State info sharing: It should start download and the state/progress of the download should be visible to same item available in different other screens.unique identifier is item id

2. There can be parallel downloads

Problem statement:

1. Unable to share the information for same item if we use state within the same item
2. On use of redux its solving problem 1 however Parallel download information is getting overwritten as its writing to same reducer state

Any idea or approach is appreciated. Thanks

Answer 1

I think by adding a new flag to your list of objects like "isDownloading", your problem gets solved.

1- You have a major list like :

[
 {
  id:1,
  name: 'song number one',
  description: 'lablab lablab ...' ,
  isDownloading:false, // this flag can help
  url:'url to download this music',
  .
  .
  .
 },
 {
  id:2,
  name: 'song number two',
  description: 'lablab lablab ...' ,
  isDownloading:true, // this flag can help
  url:'url to download this music',
  .
  .
  .
 },
 ...
]

2- in every screen, you can express in-progress items by fetching data with the flag "isDownloading: true" like this:

const desiredList = majorListTakenFromRedux.filter((music) => {
  return music.isDownloading === true;
});

Every time a client wants to download or stop downloading an item, you can update the whole list by updating the object in redux

You can also have another flag to handle another state like "pause" etc, ... so maybe it is better to use the number for "isDownloading" flag.