更新 React Redux 减速器中的数组对象

2024-02-10

这应该很简单,但我没有找到我想要的简单答案。我有一个减速机:

const posts = (state = null, action) => {
  switch(action.type){
    case "PUBLISH_POST":
        return state;
    case "UNPUBLISH_POST":
        return state;
    default:
        return postList;
  }
}

我有一个帖子列表ID的和一个status。我正在发送我的帖子 ID,但无法弄清楚简单更新的逻辑status已单击的项目从 0 到 1。我发现了很多半解决方案,但它们看起来都冗长且丑陋 - 在这种情况下实现它的最短/最好的方法是什么?

示例数据:

{
    id:1,
    user:"Bob Smith",
    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ",
    status:1 
}

假设你的action是这样的:

{
  type: 'UNPUBLISH_POST',
  payload: {
    id: 1,
    user: 'Bob Smith',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ',
    status: 1
  }
}

只需使用扩展运算符 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator为了它:

const posts = (state = null, action) => {
  switch(action.type){
    case "PUBLISH_POST":
    case "UNPUBLISH_POST":
        const index = this.state.findIndex(post => post.id === action.payload.id)

        return [
           ...state.slice(0, index), // everything before current post
           {
              ...state[index],
              status: action.type === 'PUBLISH_POST' ? 1 : 0,
           },
           ...state.slice(index + 1), // everything after current post
        ]
    default:
        return postList;
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更新 React Redux 减速器中的数组对象 的相关文章

  • Jest 和 React 以及导入 CSS 文件时出现语法错误

    我正在尝试让我的第一个 Jest 测试通过 React 和 Babel 我收到以下错误 SyntaxError Users manueldupont test avid sibelius publishing viewer src comp
  • 浸入草稿,计算属性

    我不确定为什么我会得到Error Immer drafts cannot have computed properties在我的减速器代码中 我在用着redux starter kit它用 Immer 库包装了我的所有减速器代码 我不太确定
  • 卸载 React 时删除事件监听器

    我有更高阶的组件 反应如下 export default function InnerComponent class InfiniteScrolling extends React Component constructor props s
  • yup.js 验证数字字段大于同级字段,或者可以为空

    我正在使用 Yup js 来验证一些表单字段 我有两个整数字段 Year Built Year Renovated Year Built是必填字段 Year Renovated is not 不过 装修年份可以留空如果有一个值它应该大于建造
  • 如何让 Django 和 ReactJS 协同工作?

    New to Django and even newer to ReactJS I have been looking into AngularJS and ReactJS but decided on ReactJS It seemed
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • className 属性是否承担 Reactjs 中 id 属性的角色?

    由于 id 属性在 Reactjs 组件中很少使用 因为 id 属性意味着组件不会被重用 那么是否使用 className 属性来代替 id 呢 如果是这样的话 那么 Reactjs 中相当于 HTML 中的 class 属性的是什么 cl
  • Cypress 在 Create React App 中返回 .scss 文件的 webpack 编译错误

    我正在尝试将 Cypress 添加到非常基本的 CRA 但遇到了 Cypress 无法理解 scss 文件的问题 当我跑步时npm run cypress运行测试 我收到以下错误 Error Webpack Compilation Erro
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • 如何将 SPA 嵌入 ASP.NET Core 库并从路径提供服务

    Szenario 我想构建一个 aspnetcore 库 模块includes一个小的SPA前端 IE html js css 文件应与 dll 一起提供 SPA 应从特定路径提供服务 即 some module does not需要可配置
  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents
  • SWC with JavaScript:如何处理 CSS 导入以及如何绝对导入?

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc
  • 如何从CDN注入外部JS到Jest单元测试?

    我有 npm 和 webpack 的反应应用程序 我正在尝试向其添加单元测试 我使用的是包含在我的index html 中的CDN 的jQuery 而不是使用节点模块 我在组件中使用 jQueryTest1我向其中添加了单元测试用例 现在
  • 具有多种布局的 React Router v4

    我想在我的公共布局中渲染一些路线 并在我的私人布局中渲染一些其他路线 有没有一种干净的方法可以做到这一点 显然不起作用的示例 但我希望大致解释我正在寻找的内容
  • React:设置 State 或设置 Prop 而无需重新渲染

    Problem 目前 我有一个LoginForm具有 成功 处理函数的组件handleOnSuccess 然后将其链接到父组件onTokenUpdate由 令牌更新 处理函数定义的属性handleUpdateToken 问题是setStat
  • 通过 Javascript 填充 ReactJS HTML 表单

    我正在开发一个应用程序 在打开第 3 方网站后 我可以在浏览器上下文中运行我自己的 Javascript 作为一个基于reactjs构建并具有登录表单的示例网站 您可以参考此链接 我正在尝试在reactjs生成的表单中填写用户名和密码 但是
  • Redux 状态 - 最大推荐大小

    我正在构建一个项目管理应用程序 但我仍然在努力解决一个问题 在 Redux 状态中存储什么以及 按需 加载什么 Redux 状态是否有已知的 最大推荐大小 几十千字节 几百千字节 兆字节单位 请记住 归根结底 Redux 只是 如何 将信息
  • Apollo 客户端延迟刷新

    In Apollo Client v3React 实现 我使用钩子来使用订阅 当我从订阅接收数据时 我想重新获取查询 但前提是查询之前已执行过并且位于缓存中 有办法实现这一点吗 我首先进行惰性查询 然后在收到订阅数据时手动检查缓存 然后尝试
  • React js Stripe 结账不起作用

    我正在尝试在 React js 应用程序中呈现条带结账默认表单
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

随机推荐

  • 使用 WinAPI 挂钩对程序进行沙箱处理

    我想对本机代码进行沙箱处理 并使用 WinAPI 和系统函数的挂钩来阻止或允许该程序执行某些操作 例如读 写文件 修改 Windows 注册表 使用 Internet 连接 这是一种良好且安全的方法吗 该程序绕过这样的安全层有多困难 我已经
  • StringReplace 的二进制版本

    我正在尝试在保存大量数据的 RawByteString 上运行 AnsiStrings StringReplace 其中一些数据需要替换 它会起作用 除了在 StringReplace 内部它将我的字符串转换为 PAnsiChar 因此搜索
  • 带有特定顺序和百分比注释的 ggplot2 饼图

    我有一个如下所示的数据框 make model cnt toyota camry 10 toyota corolla 4 honda city 8 honda accord 13 jeep compass 3 jeep wrangler 5
  • 事务可以在同一个 SQL Server 中跨多个数据库工作吗?如果是这样,这是分布式事务吗?

    事务可以在同一个 SQL Server 中跨多个数据库工作吗 如果是这样 这是分布式事务吗 或者会基本BEGIN TRANSACTION work 同一实例中跨多个DB的事务是本地事务 BEGIN TRANSACTION 会工作得很好
  • Java 8 Collectors.toMap SortedMap

    我正在使用 Java 8 lambda 并想使用Collectors toMap返回一个SortedMap 我能想到的最好的办法就是拨打以下电话Collectors toMap使用假人的方法mergeFunction and mapSupp
  • Javascript 将动态图像从 URL 绘制到画布元素上

    我正在尝试使用其 URL 将动态 PNG 图像 由 PHP 脚本生成的图像 绘制到 Canvas 元素上 我无法真正发布我正在测试的页面的确切 URL 因为您必须登录该网站 我正在使用的动态图像 URL 之一的示例是 http www we
  • 一个关于C++中类型强制的简单问题

    给定一个函数原型和一个类型定义 int my function unsigned short x typedef unsigned short blatherskite 标准定义了以下情况 int main int argc char ar
  • Heroku 上静态资产的重定向子域

    我希望 myapp com blog 重定向到 www myapp com blog 我已经安装了 Refraction 以在机架层执行子域重定向 这在 Heroku for blog 上不起作用 因为 blog 中的文件是静态资产 有什么
  • 简单分隔符之间的匹配,但分隔符本身不匹配

    我正在查看文本文件中的 JSON 数据 除了使用正则表达式来获取引号之间的值之外 我不想做任何事情 我只是用它作为帮助练习正则表达式的一种方法 并达到了这一点 看起来它应该很简单 但事实证明它不是 至少对我和办公室的其他一些人来说 我已经在
  • 用 Guice 代替抽象工厂?

    我是 Guice 的新手 我想知道我能走多远 我有一个界面UserInfo具有多个实现类GoogleUserInfo FacebookUserInfo TwitterUserInfo等等 这些类是使用工厂创建的 public class U
  • 使用 Python + Selenium 通过 while 循环点击下一页

    我正在尝试浏览名为 iens 的网站上的不同页面 我正在使用 selenium python 单击 volgende 荷兰语中的意思是 下一个 但我希望我的程序继续单击下一个 直到使用 while 循环没有剩余页面为止 所以在这种情况下 我
  • SQL Server MDF 文件 - 如何备份

    这是场景 我们有一个包含三个数据库的公司网站 它运行 SQL Server 2005 这三个数据库链接到 MDF 文件 有人试图直接复制 粘贴这些 MDF 文件之一 该文件对文件进行了某种锁定 从而导致只读错误 我们通过分离 重新连接来修复
  • PostgreSQL、pg_dump 和 pg_restore 以及对象依赖顺序

    我有个问题 有没有办法强制 PostgreSQL 9 3 备份 恢复模式以正确的依赖对象顺序 例如 在创建物化视图本身之前 我需要创建一个在物化视图中使用的函数 我在模式恢复时遇到错误 因为物化视图是在创建函数本身之前创建的 Thanks
  • pycharm 中的 matplotlib 外部文档

    如何在 pycharm 中添加 matplotlib 外部文档 到目前为止尝试添加 http matplotlib org api http matplotlib org api 模块 名称 api html matplotlib 模块 名
  • SignalR 和 IIS 回收

    我想创建一个使用 SignalR 向客户端发送通知的服务器 使用组 假设我的网站被回收 这些组会发生什么 因为它们不持久 您需要将您的组保存在外部永久存储中 在这里查找更多详细信息 http www asp net signalr over
  • Graphviz .dot 节点排序

    我正在构建一个 epsilon NFA 来使用规范结构识别正则表达式 我使用子图对正则表达式的各个部分进行分组 运算符给我带来了特别的麻烦 因为 dot 决定移动节点的顺序 我尝试添加边缘权重以强制特定边缘变短以保持边缘的顺序一致 但这似乎
  • python 中的低通滤波器

    我正在尝试将 Matlab 代码转换为 Python 我想实施fdesign lowpass Python 中的 Matlab 这个 Matlab 代码的确切替代品是什么scipy signal firwin demod 1 a mod n
  • jQuery 验证:在提交之前验证后删除元素?

    我有一个城市的 SVG 地图 单击该地图时 会在我的表单中的 div 中创建隐藏元素 我正在使用jQuery 验证插件 http docs jquery com Plugins Validation验证我的表格 为了确保用户单击了地图的某个
  • 关于GCC链接器搜索顺序的一些问题

    我对 gcc 链接顺序有一些疑问 GCC man 说链接器默认从左到右搜索符号 而不重复搜索 这是我的测试 main c include
  • 更新 React Redux 减速器中的数组对象

    这应该很简单 但我没有找到我想要的简单答案 我有一个减速机 const posts state null action gt switch action type case PUBLISH POST return state case UN