How to use more than one React component at the same time if only one Reducer?

Question

React

Let's say we have a React page. It currently contains only one React component "Catalogue", which is a catalog of some items, with pagination, sorting and other "settings".

But there was a need to place another such catalog below on the same page, but just with slightly different settings.

What is the correct way to organize the Reducer in this case, if I store the loaded catalog elements, the sort direction, the pagination page and other settings associated with the catalog in the reducer?

After all, there will now be two directories, and the reducer is calculated that only one directory will be initialized on the page. How would you do it? The data structure in the reducer is as follows:

{
    items: [],
    page: 1,
    sort: null,
    filter: null,
    category: null
}

This is how it is at the moment. If the reducer is adapted for the simultaneous use of several directories, then I think you can enter subsections into the object. What are your thoughts?

Answer 1

If the data sort is specific to the current component, it can be stored in the component's state. In redux, it makes sense to store only the data that is used by several components or that needs to be saved between sessions. If, nevertheless, there is a need to store sortings and selections in the redax storage, then simply create some keys that are unique for the component and store them in them

{
  items: [],
  settings: {
    key1: { filter: {}, sort: {}, page: 2 },
    key2: { filter: {}, sort: {}, page: 1 },
  }
}