具有关系数据存储的列表和项目之间的关系（使用 react-redux）

Posted 2023-02-22

【中文标题】具有关系数据存储的列表和项目之间的关系（使用 react-redux）

【英文标题】：Relationship between list and item with relational data store (using react-redux)

【发布时间】：2015-12-02 18:36:03

【问题描述】：

我使用 React 和 Redux 作为我的商店。我也在使用 react-redux 库来集成两者。我的商店包含两组数据：

任务 id、name、assigneeId 用户 id, name

我有一个 TaskListComponent（使用 react-redux）connect-s 到我的商店，使用：

@connect(state => 
    tasks: state.tasks,
    users: state.users
)

我需要两者，因为列表有一个过滤器允许搜索我的任务名称或用户名 - 我的组件需要“用户感知”。

此组件列出了另一个名为 TaskItemComponent 的组件，它显示任务名称和分配用户的名称。

我正在努力确定解决任务分配用户的最佳方法。

React 指南告诉我，Item 组件应该将 Task 作为道具，并在渲染函数中解析 User 本身。但是，这要求组件具有存储感知能力，并且使用 react-redux 库，它似乎没有被设计为允许组件在没有 connect-ed 的情况下访问存储。

或者我可以解析列表中的用户并将其与任务一起传递给项目组件，例如<TaskItemComponent task=task assignee=resolveTaskAssignee(task) />。这样做的好处是让我的项目保持“哑”，并且意味着我不需要让它监听商店的变化（甚至不需要知道商店）。

任何建议将不胜感激。

【参考方案1】：

选项#2 本身并没有错。您必须在某处进行数据操作。它始终是在 smart 组件中执行这些操作的正确位置。

就我个人而言，我更喜欢商店中有更好的数据模型。但是，你得到了你所得到的。

【参考方案2】：

这两种方法都很好。我将从外部传递道具开始，一旦它变得乏味，让Task 组件接收task 作为道具但是使用connect 读取它的user。 p>

另见https://***.com/a/25701169/458193。