Redux - 通过其键在状态数组中查找对象并更新其另一个键

Posted 2023-03-07

【中文标题】Redux - 通过其键在状态数组中查找对象并更新其另一个键

【英文标题】：Redux - Find object in state array by its key and update its another key

【发布时间】：2017-12-01 01:49:29

【问题描述】：

我正在开发一个在后端使用 NodeJS 并在前端使用 React + Redux 的 CRUD 应用程序。这是其中所有工作方式的快速模式：

添加项目

用户输入帖子的标题 然后将标题发送到调度，该调度在 NodeJS 中获取 POST 路由并通过正文发送标题 在 NodeJS 路由中，我在集合中添加一个具有该标题的新项目

BACKEND DONE，新帖子在服务器中

我在第 2 步的 dispatch 函数上添加了 .then()。其中我使用 type: 'ADD_POST' 和 post: post 调度了一个动作（我从 NodeJS res.json(post: result from database) 收到了帖子）

在我的减速器中，我设置了一个CASE 'ADD_POST': return action.post

FRONTEND DONE，同一篇文章现在对用户可见而无需刷新

我想使用相同的逻辑来更新特定帖子的赞。这是我到目前为止所做的：

点击帖子上的按钮会触发获取 NodeJS PUT 路由的调度 NodeJS 路由使用 ID 找到帖子，并将帖子的喜欢的旧值加 1

BACKEND DONE，帖子现在在服务器中多了 1 个赞

我再次将.then 添加到获取NodeJS 路由的调度中，在该调度中我使用type 'ADD_LIKE' 和post ID 调度我更新的操作

在 reducer 中，我设置了一个 CASE 'ADD_LIKE':，它使用以下 sn-p 中的代码遍历状态。

这是sn-p：

state.map(item => 
    if(item.id === action.postid) 
      //i find the specific item, but now im stuck on how to update the likes property of it
    
)

如果有帮助，这是我一直在看的播放列表，如果你想看看这家伙是如何实现删除功能的，我想用同样的逻辑添加点赞功能：Link to playlist

【参考方案1】：

state.map(item => 
    if (item.id !== action.postid) return item; // no need to change other items
    const likes = item.likes;
    return Object.assign(, item, likes: likes + 1); // [1]
);

[1] 行创建一个新对象，该对象具有item 的所有相同属性，但它会覆盖现有属性likes 并简单地添加1。

确保您实际上为 reducer 中更改的项目创建了一个新对象，因为您的状态中的所有内容都应该是不可变的。