having multiple instance of same reusable redux react components on the same page/route

Question

We are creating a large front-end application.

We are using React-Redux for it

We are creating some reusable components.

This question is regarding

Answer 1

I interpreted the question to mean:

• you have content data in the store (e.g. the sections and their titles)
• you have components for drawing bits of the data (e.g. your )
• you want to display more than one section on a page but currently all your headers have the same text

One possible solution would have you add the idea of "sections" to your store. You'd create reducers that manage the content structure of the data. E.G. the store state, at one time, may look like this:

{ 
  sections: {
     0: {
        header: 'My section title',
        content: 'Whatever your content is'
     },
     1: {
        header: 'My other section title',
        content: 'Loads of lovely writing or hrefs to images or whatever'
     }
  }
}

```

You would then have a "container component" or "layout component" or "smart component" (they have many names), that "knows" that you want to use section 2 and section 4 on a particular page. How it knows this, is up to you. Perhaps you hard-code the indices (because it will always be the same), perhaps you have a filtering rule, perhaps you have another field in the store which defines the choices... etc.

The container component would then pass the chosen heading into the "dumb" , perhaps like this:

{sections[2].header}

or