redux 反应策略与异步数据和交互

Question

我想知道哪种设计最适合这个。我有一个远程获取的列表。假设它是 posts.

的列表

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

在此列表中，用户可以 select 每个 post 执行一个操作（甚至是批处理操作）。假设在 UI 中每个小 post 都有一个复选框。

因此，后端不关心这些 select 操作，但我需要确切地知道哪些 post 被 selected（例如删除）以便前端可以向后端发送请求。一种处理方法是让状态的形状看起来像这样：

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

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

然后另一种方法是在 post 被 select 编辑时直接修改每个 post 的数据。像这样：

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

但这似乎与 react 和 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 反应策略与异步数据和交互

redux react strategy with async data and interaction

reactjs

redux