Question

我想知道什么样的设计最适合这个。我有一个远程获取的列表。让我们说这是一个帖子列表。

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

在此列表中，用户可以为操作选择每个帖子（甚至批量操作）。假设在UI中，每个小帖子都会有一个复选框。

因此，后端并不关心这些选择操作，但我需要确切地知道选择哪些帖子（例如删除），以便前端可以向后端发送请求。处理这种情况的一种方法是使状态的形状如下所示：

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

但这可能会使UI中的渲染变得复杂。

然后另一种方法是在选择帖子时直接修改每个帖子的数据。像这样：

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

但这似乎与反应和反应有关。 redux旨在使用。任何反馈都表示赞赏！

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]);
);

redux通过异步数据和交互来应对策略

1 个答案: