首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React/Redux -我应该如何存储可以通过拖放重新排序的对象列表?

在React/Redux中,如果你想存储可以通过拖放重新排序的对象列表,你可以采用以下方法:

  1. 使用Redux来管理应用的状态。Redux是一个可预测的状态容器,它可以帮助你管理应用的状态,并且可以方便地进行状态的更新和同步。
  2. 在Redux的状态树中,创建一个数组来存储对象列表。每个对象代表一个可以拖放和重新排序的元素。
  3. 当用户进行拖放操作时,你可以通过拖放库(如React DnD)来捕获拖放事件,并更新Redux状态树中的对象列表。
  4. 在Redux的reducer中,根据拖放事件的类型,更新对象列表的顺序。你可以使用数组的splice方法来实现重新排序。
  5. 在React组件中,通过连接Redux的connect函数,将对象列表从Redux状态树中提取出来,并作为props传递给组件。
  6. 在React组件中,使用map函数遍历对象列表,并渲染每个对象的UI。你可以为每个对象添加拖放处理程序,以便用户可以拖动和重新排序它们。
  7. 如果你想将对象列表保存到数据库或服务器,你可以使用后端开发技术来实现。你可以使用后端框架(如Node.js)和数据库(如MongoDB)来处理数据的存储和检索。
  8. 对于云计算方面的推荐,腾讯云提供了一系列的产品和服务,如云服务器、云数据库、对象存储等,可以帮助你构建和部署React/Redux应用。你可以参考腾讯云的官方文档和产品介绍来了解更多详情。

总结起来,通过使用Redux来管理应用的状态,结合拖放库和后端开发技术,你可以实现存储可以通过拖放重新排序的对象列表的功能。腾讯云提供了一系列的产品和服务,可以帮助你构建和部署React/Redux应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

8个写完以后就可以让你成为顶尖开发者有趣应用程序

Demo :https://trello-copy-ddiaorohmd.now.sh/ 你将clone一个Trello: 路由 拖放 创建新对象(板子、列表、卡片) 处理输入和验证 客户端路径:如何使用本地存储...这里有一个用React+Redux例子:https://github.com/wesharehoodies/simple-trello。...如果您感兴趣如何构建它,为它编写了一个教程(https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092...地址:http://todomvc.com/examples/react/#/。已经有多少人试过了?是的 ,知道有很多。但是这不重要,最重要是 知道 如此受欢迎是有一个原因。...如果你能创建复杂应用程序,你就可以脱颖而出。 你将学到什么: 拖放API 创建丰富用户界面 Project #8: A messenger clone (native app) ?

2.6K10

关于react-dnd,看这一篇就够了

在拖动过程中,不需要开发者自己判断拖动状态,只需要在传入 spec 对象中各个状态属性中做对应处理即可,因为react-dnd使用了redux管理自身内部状态。...(组件),用于控制拖拽行为,数据共享,类似于react-reduxProvider。...bool值 DropTargetMonitor对象 DropTargetMonitor是传递给拖放目标的收集函数对象。...数据流转 看了API之后,实际上不能很好认识到每个状态和每个方法工作流程,所以,这里画了一张图,帮助你更清晰看到它数据是如何流动。...,欢迎star 使用场景 除了上面的例子,还有非常多案例 批量拖拽 可以选择多个元素进行拖拽 拖拽排序 可以拖拽元素放置排序 完整demo戳链接:https://github.com/AdolescentJou

17.9K42
  • 「首席架构师推荐」React生态系统大集合

    algorithm in React React面试问题 13个基本React面试问题 React面试问题和答案列表 React工具 React开发工具 create-react-app - 通过运行一个命令来设置现代...如何弓数据! PrimeReact - React最完整UI框架!...,具有热重新加载,动作重放和可自定义UI react-router-redux - 保持react-router和redux同步绑定 redux-form - 使用react-redux保持形状状态高阶组件...- 用于测试redux异步动作创建器和中间件模拟存储 redux-immutable - 创建一个与Immutable.js状态一起使用Redux combineReducers等效函数 redux-react-i18n...- 一个简单redux中间件,用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程 在ES6中使用ReactRedux

    12.4K30

    现代 React 开发必备 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

    Hi,大家好 ssh,成为一个现代 React 开发者,不仅需要理解 React 核心概念,还需要对整个 React 生态系统了如指掌。...~ 学习常用库相关知识,可以大大简化你开发过程。 即使你没有具体用过,你也至少应该知道它们存在以及它们解决问题。...它有很多神奇特性,可以React数据 Fetch 和开发体验很丝滑。这些功能包括自动缓存、自动重新 Fetch、滚动恢复、Render-as-you-fetch 等。 2....(来源: Redux) ReduxReact 中最受欢迎状态管理库之一,可以帮你更轻松地构建大规模工业级应用程序。 3....没有任何依赖,可以通过减少代码、隔离重新渲染、更快挂载等来提高应用程序性能。

    3K30

    回望过去,展望未来- 2024 React 生态一览表

    有一半时间组件应该渲染为正面,另一半时间应该渲染为反面。...「路由表(Route Table):」 路由表是路由器中存储一种数据结构,用于将 URL 映射到相应组件或视图。路由表可以手动配置,也可以通过自动化工具生成。...「状态容器(State Container):」 状态容器是存储和管理应用状态对象。在一些流行前端框架和库中,如 ReduxReact)、Vuex(Vue),都提供了状态容器实现。...当然,还有recoil/jotai等,这里可以参考之前React-全局状态管理群魔乱舞 在上面的内容中,我们没有涉及Redux,其实刚开始接触就是Redux,但是在后面的使用中,慢慢发现它「...它提供了一种简单且可定制方式来实现重新排序重新排列或组织用户界面中元素拖放功能。 react-dnd[38]这是一个老牌Dnd库。

    69010

    做了N+1个企业项目之后, 总结了这些React必备插件

    Redux JavaScript 状态容器,提供可预测化状态管理 MobX 通过函数响应式编程使得状态管理变得简单和可扩展 Redux Thunk Redux异步处理中间件 Redux Saga Redux...react-desktop与NW.js和Electron.js完美结合,但是可以在任何JavaScript驱动项目中使用 Zent 有赞 PC 端 WebUI 规范 React 实现,提供了一整套基础...react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 可帮助我们构建复杂拖放界面,同时保持组件分离 react-moveable 支持自由拖拽, 缩放, 参考线灵活强大拖拽库...react-grid-layout 强大网格拖拽排序缩放库 mixitup 强大列表卡片排序动画库 7....全家桶解决方案 最后笔者精心准备了一个React实战项目, 方便大家学习和提高编程水平, 感兴趣朋友可以了解一下.

    2K10

    为什么不再用Redux

    我们获取数据,通过 reducer/action 将其添加到存储中,并定期重新获取以确保它是最新。我们用 Redux事情太多了,甚至把它看成是解决问题全面解决方案。...但是,同步缓存和保持状态是非常复杂,因此我们不应该Redux 鼓励那样,从头开始重新创建这个后端状态。 当我们开始在前端重新创建数据库时,后端和前端之间职责界限很快就变得模糊不清。...使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取简单 TODO 列表。...你可以在全局级别设置缓存配置,然后就可以忘掉它了——一般来说它足以完成你期望工作。有关其幕后工作机制更多信息,请通过下方链接查看 React Query 文档。...https://react-query.tanstack.com/docs/guides/mutations 还写了一份精选 React Query 资源列表,你可以在这里浏览。

    2.6K20

    React组件设计模式-纯组件,函数组件,高阶组件

    虽然值已经被改变,但是子组件比较是之前props引用是否相同,所以不会检测到不同。因此,你可以通过使用es6assign方法或者数组扩展运算符或者使用第三方库,强制返回一个新对象。...(比较原始值和对象引用是低耗时操作。如果你有一列子对象并且其中一个子对象更新,对它们props和state进行检查要比重新渲染每一个子节点要快多。)...这个问题解决方案是通过使用 React.forwardRef API(React 16.3 中引入)参考React实战视频讲解:进入学习三、React Redux connectReact Redux...connect 和其他 HOC 承担装饰器角色)四、其他(1)key每当一个列表重新渲染时,React 会根据每一项列表元素 key 来检索上一次渲染时与每个 key 所匹配列表项。...如果你没有指定任何 key,React 会发出警告,并且会把数组索引当作默认 key。但是如果想要对列表进行重新排序、新增、删除操作时,把数组索引作为 key 是有问题

    2.2K20

    React组件设计模式之-纯组件,函数组件,高阶组件

    虽然值已经被改变,但是子组件比较是之前props引用是否相同,所以不会检测到不同。因此,你可以通过使用es6assign方法或者数组扩展运算符或者使用第三方库,强制返回一个新对象。...(比较原始值和对象引用是低耗时操作。如果你有一列子对象并且其中一个子对象更新,对它们props和state进行检查要比重新渲染每一个子节点要快多。)...这个问题解决方案是通过使用 React.forwardRef API(React 16.3 中引入)三、React Redux connectReact Redux connect 函数是一个...connect 和其他 HOC 承担装饰器角色)四、其他(1)key每当一个列表重新渲染时,React 会根据每一项列表元素 key 来检索上一次渲染时与每个 key 所匹配列表项。...如果你没有指定任何 key,React 会发出警告,并且会把数组索引当作默认 key。但是如果想要对列表进行重新排序、新增、删除操作时,把数组索引作为 key 是有问题

    2.3K30

    前端高频react面试题

    来担任,store只做存储,中间人,当Reducers更新完成以后会通过store订阅来通知react component,组件把新状态重新获取渲染,组件中也能主动发送action,创建action...在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。如果在短时间内频繁setState。...这个问题就设计到了数据持久化, 主要实现方式有以下几种:Redux: 将页面的数据存储redux中,在重新加载页面时,获取Redux数据;data.js: 使用webpack构建项目,可以建一个文件...react-router 直接可以支持。这个方法适合一些需要临时存储场景。Redux 中异步请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...在当前组件 props中,包含 location属性对象,包含当前页面路由地址信息,在 match中存储当前路由参数等数据信息。可以直接通过 this .props使用它们。

    3.4K20

    React DnD

    不像其它库一样提供无穷尽Draggable Component应对常见业务场景,React DnD从相对底层角度提供支持,是对拖放能力抽象与封装,通过抽象来简化使用,通过封装来屏蔽下层差异 二.术语概念...Item和Type Item是对元素/组件抽象理解,拖放对象不是DOM元素或React组件,而是特定数据模型(Item): An item is a plain JavaScript object...DnD就是基于Redux实现,见下文核心实现部分 Connector Connector用来建立DOM抽象(React)与DnD Backend需要具体DOM元素之间联系: The connectors...Dispatch Action把native DnD状态传递到上层 可以看作基于Redux逻辑拆解,中间层Core持有DnD状态,下层Backends负责实现约定interface,作为Core数据源...0.5 : 1, cursor: 'move' }} /> ); } 很自然地实现了被拖走效果(拖放对象变成半透明),看不到复杂DnD处理逻辑(这些都被封装到了React DnD

    1.5K30

    Redux 包教包会(一):解救 React 状态危机

    接着我们将通过实战方式学习如何将一个纯 React 应用一步步地重构成一个 Redux 应用,最终实现一个升级版待办事项小应用。...通过对象嵌套来类比组件嵌套组合,这棵由 JavaScript 对象建模状态树就是 Redux Store。...保存改变内容,如果你 React 开发服务器打开着,那么你应该可以在浏览器中看到如下内容: ? 恭喜你!...对象状态树,然后所有的状态改变都是通过修改这一状态树,进而将修改后新状态传给相应组件并触发重新渲染来完成我们目的。...修改 Store 中保存状态就是上面这张图第二个部分,即我们已经创建好了 Store,并在里面存储了一棵 JavaScript 对象状态树,我们通过 “发起更新动作” 来修改 Store 中保存状态

    1.8K20

    React】211- 2019 React Redux 完全指南

    Redux 会为你提供一个可以存储数据全局 “parent”,然后你可以通过 React-Redux 把兄弟组件和数据 connect 起来。...你应该可以看到类似这样日志信息: ? INIT 后面的字母和数字是 Redux 随机生成 注意在你创建 store 同时 Redux 如何调用你 reducer。...你可以创建一个对象通过 action type 来查找对应处理函数。...直到我们重新实现 increment/decrement,它是不会变化如何使用 React Redux connect 你可能注意到这个调用看起来有点……奇怪。...有时也依旧会忘记。 如何使用 React Redux mapDispatchToProps 现在你知道 action 生成器是什么,我们可以讨论又一个级别的抽象。(知道,知道。这是可选。)

    4.2K20

    ReactRedux

    store是一个类似数据库存储(或者可以叫做状态树),需要设计自己数据结构来在状态树中存储自己数据。 Redux入门 Redux简介 Redux是一个状态集中管理库。...react-redux.png 上图是Redux如何实现状态管理框架,View(视图) 可以通过store.dispatch()方法传递action。...把所有数据放到一个对象里,每个数据以 ID 为主键,不同实体或列表通过 ID 相互引用数据。把应用 state 想像成数据库。...建议仔细学习 React Redux文档。如果你担心 mapStateToProps 创建新对象太过频繁,可以学习如何使用 reselect 来 计算衍生数据。...react-redux.png 我们仍然会遵守上图,这是我们核心,不能改变,下面我们来看一个实际例子,工资列表页面。 工资列表页面 也就是一个普通通过网络请求,去请求列表数据列表展示。

    4K20

    React 原理问题

    diff:对于同一层级一组子节点,需要通过唯一 id 进行来区分 如果没有 id 来进行区分,一旦有插入动作,会导致插入位置之后列表全部重新渲染。...使用 Redux 或者 Mobx 等状态管理库 使用订阅发布模式 11. React 父组件如何调用子组件中方法?...因为 Symbol 无法被序列化,所以 React 可以通过有没有 $$typeof 属性来断出当前 element 对象是从数据库来还是自己生成。...redux是将整个应用状态存储到一个地方成为store, 里面保存着一个状态树store three, 组件可以派发(dispatch)行为(action)给store, 组件内部通过订阅store中状态...数据可变性不同 Redux强调对象不可变性,不能直接操作状态对象。而是在原来状态对象基础上返回一个新状态对象,最后返回应用的上一个状态 Mobx可以直接使用新值更新状态对象 4.

    2.5K00

    总结100+前端优质库,让你成为前端百事通

    中 动画库 「Anime.js」 一个 JavaScript 动画库,可以处理 CSS 属性,单个 CSS 转换,SVG 或任何 DOM 属性以及 JavaScript 对象 「Velocity」 一个高效...提供了一整套基础 UI 组件以及一些常用业务组件 react-icons 基于 React 封装丰富图标库 状态管理 Redux JavaScript 状态容器,提供可预测化状态管理 Redux...Thunk Redux 异步处理中间件 MobX 通过函数响应式编程使得状态管理变得简单和可扩展 Dva 一个基于 reduxredux-saga 数据流方案 工具类 React Virtualized...使用 React 和 D3 构建自定义图表库 Viser 支持多种主流框架可视化库 拖拽/排序 react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 可帮助我们构建复杂拖放界面...,同时保持组件分离 react-moveable 支持自由拖拽, 缩放, 参考线灵活强大拖拽库 react-grid-layout 强大网格拖拽排序缩放库 mixitup 强大且高性能列表卡片排序动画库

    3.2K20

    前端框架_React知识点精讲

    React 给这些对象添加了$$typeof属性,可以「标识它们是React元素」。...每种类型都有属于各自子问题。 大致可以分为4类 Redux 倾向于「吸纳所有的状态」,不管它是什么类型,因为它提倡单一存储。这通常会「导致将所有的东西存储在一个大单体存储中」。...❝通过hook,我们可以从具有巨大全局存储「单体状态管理」转变为向自下而上 「微状态管理」,通过hook消费更小状态片。...这样做「好处」是,消费者可以「精细地控制」如何订阅和优化订阅该状态组件将如何重新渲染。 「缺点」是这是一个手动过程,可能容易出错,而且人们可能会说这需要不必要开销,不应该成为API一部分。...自下而上方法力量在于,你页面构建以「可以将哪些简单基础原件组合在一起以实现想要东西」为前提,而不是一开始就考虑到某个特定抽象。

    1.3K10

    react高频面试题总结(附答案)

    项目中,通过redux存储全局数据时,会有一个问题,如果用户刷新了网页,那么通过redux存储全局数据就会被全部清空,比如登录信息等。...这时就会有全局数据持久化存储需求。首先想到就是localStorage,localStorage是没有时间限制数据存储可以通过它来实现数据持久化存储。...redux-persist实现React持久化本地数据存储简单应用。...在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。如果在短时间内频繁setState。...其中节点重新排序同时涉及插入、移动、删除三个操作,所以效率消耗最大,此时策略三起到了至关重要作用。通过标记 key 方式,React 可以直接移动 DOM 节点,降低内耗。

    2.2K40

    【JS】1724- 重学 JavaScript API - Drag and Drop API

    通过拖放 API,我们可以实现将可拖拽(draggable)元素拖动到另一个可放置(droppable)元素,以及实现交互式拖放体验。...当拖动图片时,我们使用 dragstart 事件将图片 ID 存储在 dataTransfer 对象中。...通过这样实现,用户可以轻松地将图片拖动到不同相册中进行分类和管理。 3.2 项目任务管理应用 在项目任务管理应用中,用户可以通过拖动任务卡片进行排序、分组或更改任务状态。...通过这样实现,用户可以通过拖动任务卡片来进行排序、分组或更改任务状态。 3.3 页面生成器 拖放 API 在页面生成器应用程序中也有广泛应用,尤其是海报设计器、低代码平台等。...4.2 优缺点 拖放 API 有以下优点和缺点:优点: 提供了直观、灵活拖放功能,提高用户体验。 可以轻松实现拖放排序、文件上传等常见交互操作。

    27120

    Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

    觉得必须比其他人(他们有天生数学能力)更努力地学习相同概念。这个想法深深扎根在大脑中,很确定永远无法学习像“二叉搜索树”这样东西,以及如何在精神上分析像“归并排序”这样递归噩梦。...在过去18个月左右,可以自信地说已经学会了如何编码。尽管我仍然不愿自称为程序员。通过学习CS基本原理,希望不仅能对自己作为一名程序员更有信心,而且还能帮助其他人。...发现了一个非常棒网站,它能让我们看到如何对算法和数据结构进行排序。这是快速排序在100个项目数组中执行操作。你可以在下面的地址中找到完整可视化列表。...通过这种方式,可以捕获已登录消息,然后在浏览器中模拟一个控制台以显示代码输出。你可以在任何需要清除模拟控制台消息时候运行clearConsole()。...该应用程序将在下一次访问时检索这个保存状态,并将Redux存储与它解除冻结。这样你就可以在你离开地方找到你位置。

    1.4K50
    领券