【问题标题】:Redux - Find object in state array by its key and update its another keyRedux - 通过其键在状态数组中查找对象并更新其另一个键
【发布时间】:2017-12-01 01:49:29
【问题描述】:

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

添加项目

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

BACKEND DONE,新帖子在服务器中

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

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

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

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

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

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

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

  2. 在 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

【问题讨论】:

    标签: node.js reactjs redux react-redux redux-thunk


    【解决方案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 中更改的项目创建了一个新对象,因为您的状态中的所有内容都应该是不可变的。

    【讨论】:

      猜你喜欢
      • 2020-11-25
      • 2019-04-01
      • 1970-01-01
      • 2016-09-21
      • 1970-01-01
      • 2019-09-17
      • 2019-08-08
      • 2021-01-16
      • 1970-01-01
      相关资源
      最近更新 更多