Reduction strategy reacts with asynchronous data and interaction

Question

I am wondering which design would be better for this. I have a list that has been deleted remotely. Let's say this is a list of messages.

posts  {
    1: { title: 'some title', body: 'some body'},
    2: { title: 'another title', body: 'another body'}
}

In this list, the user can select each message for the action (and even batch actions). Let's say that in the user interface, each small post will have a checkbox.

Thus, the backend does not care about these selection actions, but I need to know exactly which messages are selected (for example, to delete) so that the external interface can send a request to the backend. One way to deal with this is to have the state form look like this:

{
    posts  {
        1: { title: 'some title', body: 'some body'},
        2: { title: 'another title', body: 'another body'}
    }
    selectedPosts: [1, 2]
}

But this can make rendering difficult in the user interface.

. :

{
    posts  {
        1: { title: 'some title', body: 'some body', selected: true},
        2: { title: 'another title', body: 'another body'}
    }
}

, . !

Answer 1

, , , . , map :

const selectedPosts = state.selectedPosts.map(id => state.posts[id]);

- connect - reselect:

import { createSelector } from 'reselect';

const postsSelector = state => state.posts;
const selectedPostIdsSelector = state => state.selectedPosts;

const selectedPostsSelector = createSelector(
  postsSelector ,
  selectedPostIdsSelector ,
  (posts, selectedPosts) => selectedPosts.map(id => posts[id]);
);