如何在Redux中更新状态-向上和向下移动待办事项- React
在Redux中更新状态-向上和向下移动待办事项的过程如下：
- 首先，我们需要定义一个Redux的状态管理器，包括待办事项列表和当前选中的待办事项索引。
- 创建一个Redux的reducer函数，用于处理不同的action类型。在这个reducer函数中，我们可以根据action的类型来更新状态。
- 定义两个action类型，一个用于向上移动待办事项，另一个用于向下移动待办事项。这两个action类型可以分别命名为"MOVE_UP"和"MOVE_DOWN"。
- 在Redux的reducer函数中，根据不同的action类型来更新状态。当接收到"MOVE_UP"类型的action时，我们可以将当前选中的待办事项索引减1，表示向上移动。当接收到"MOVE_DOWN"类型的action时，我们可以将当前选中的待办事项索引加1，表示向下移动。
- 在React组件中，我们可以使用React-Redux库提供的connect函数将Redux的状态和action绑定到组件的props上。
- 在组件中，我们可以通过props来获取当前选中的待办事项索引和待办事项列表。然后，我们可以根据当前选中的待办事项索引来渲染对应的待办事项。
- 当用户点击向上或向下移动按钮时，我们可以调用对应的action来更新状态。例如，当用户点击向上移动按钮时，我们可以调用dispatch函数来发送一个"MOVE_UP"类型的action。
- Redux会自动调用reducer函数来处理这个action，并更新状态。然后，React组件会重新渲染，显示更新后的待办事项列表。
总结：在Redux中更新状态-向上和向下移动待办事项的过程包括定义状态管理器、创建reducer函数、定义action类型、更新状态、绑定状态和action到组件props、渲染待办事项、处理用户操作、更新状态并重新渲染组件。这样可以实现待办事项的移动功能。
腾讯云相关产品推荐：
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 人工智能平台AI Lab：https://cloud.tencent.com/product/ailab
- 物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
- 移动开发平台MPS：https://cloud.tencent.com/product/mps
- 对象存储COS：https://cloud.tencent.com/product/cos
- 区块链服务BCS：https://cloud.tencent.com/product/bcs
- 元宇宙服务：https://cloud.tencent.com/product/metaspace
相关·内容
我正在尝试找出如何在redux中更新状态，以便我可以在单击时向上移动元素和向下移动元素。 state是一个对象数组，当前有3个元素，分别为id、text和isCrossed: false。单击时，我将传递id，因此action.id将是我想要移动的元素的id。 我的当前代码如下，但它不能工作。它似乎只移动了一次，然后代码就崩溃了。
浏览 27提问于2021-04-09得票数 1
回答已采纳
因此，我对React还是个新手，我不能理解如何基于另一个组件重新呈现主组件的概念。
假设我们有一个待办事项应用程序，一个待办事项可以有一个状态(新建、运行、已关闭)。我们在一个列表中显示所有的待办事项，并且我们可以根据它们的状态来过滤这些事项。我们使用一个类似于bootstrap dropdownbutton的组件来设置过滤器，这是一个React组件。现在，当我们更改过滤器时，我们
浏览 0提问于2015-11-12得票数 3
我想用react native和redux创建备注的待办事项列表。我将笔记和待办事项存储在不同的位置，具有不同的状态，这一逻辑非常复杂。如何在Android/IOS设备的本地存储中存储所有关系和所有数据？
浏览 54提问于2020-10-01得票数 1
回答已采纳
我正在尝试创建一个简单的待办事项应用程序的搜索，而不是试图通过处理待办事项的reducer来管理过滤的状态，I was told设置另一个useReducer，然后通过Redux上的reducer管理过滤器问题是，当我将来自todos useReducer的状态向下传递到filter reducer状态时，它不会随着我更改reducer而更新。这是意料之中的。我的初始值是我的待办事项</em
浏览 9提问于2020-08-31得票数 0
1回答
让我们想象一下react/redux上的待办事项列表，您有一个为todoItems数组服务的状态。但是现在让我们想象一下，我希望页面上没有几个使用不同UI呈现todoItems的组件。我需要更新todoItems CRUD上的每个组件。您对这个问题的架构方法是什么？不要忘记，我们有一个大的数据库，我们可以得到todoItems只分页。让我们说清楚。当我们用这个UI实现redux生命周期时，我们有两个选项：
1)将todoItems的
浏览 1提问于2017-03-31得票数 1
回答已采纳
我有一个使用redux的react crud应用程序，下面是它的结构。它使用的数据只是一个包裹在div标签周围的段落并不复杂，什么是在本地存储中存储数据的好方法 ? ? ? 如何在本地存储中存储状态和所有待办事项？ 更新:遵循下面的答案后，这是我得到的错误， ? 下面是我如何配置它的，这是store.js文件 ?
浏览 42提问于2021-07-14得票数 0
我决定把Redux添加到我的宠物项目(惊喜，todolist)。false, id: uuid() })
todoEntry来自另一个组件，如：setTodoEntry(e.target.value)} placeholder='Add new entry (max 55 symbols)' />
此外，我还使用一些钩子来管理我的
浏览 2提问于2022-10-05得票数 0
我正在使用React和Redux，并构建了一个简单的todo-app。现在，我想为用户创建一个保存按钮，它将保存对待办事项所做的任何更改(例如，更改文本)。因此，保存按钮需要以某种方式知道是否对待办事项进行了任何更改。例如，最初我们有这些来自Redux的待办事项： const todos = [ id: 0,
text: 'Learn Redux
浏览 94提问于2017-08-28得票数 0
回答已采纳
我正在使用React和Redux Toolkit，我正在努力让React从我的UI中删除一个'todo‘，尽管Redux的响应与预期一致。在Redux开发人员工具中，removeTodo按预期工作，从待办事项数组状态中删除待办事项，但React不会跟随，因此我的UI也不会随之改变。我是React<em
浏览 32提问于2021-07-07得票数 1
回答已采纳
2回答
在我的待办事项列表示例应用程序中，我试图在创建或删除一个待办事项后更新所有的待办事项，以便在更改后可以重新呈现列表组件。它有时会更新待办事项，但有时不会。我想不出其中的原因。我使用的是Redux和Thunk。我还发现在componentWillReceiveProps方法中，我没有得到更新的道具。这可能与服务器问题有关，还是我做
浏览 26提问于2019-07-30得票数 0
1回答
我有一个存储，它有一个待办事项数组，我的操作成功地调度和更新了存储。
我的任务组件列表连接到存储，并将数组中的每个项目呈现为其自己的组件。在初始加载时，我的待办事项列表显示了来自商店初始状态的待办事项，但是一旦我更新了状态，来自该状态的新事项就不会被呈现。import React from 'react</em
浏览 1提问于2017-05-25得票数 0
1回答
简单的待办事项应用程序-我需要从容器/组件中检索输入值，并将其存储在redux状态中。输入值一直存储在本地状态，直到用户点击“添加”按钮。我的问题是:如何通过分派/操作向上传递此输入值，然后检索它以便我的reducer处理它。mapDispatchToProps = dispatch => ({})
class Main extends
浏览 22提问于2019-03-29得票数 0
回答已采纳
2回答
我刚开始学习react钩子和react-redux钩子，到目前为止我什么都懂了。但有一件事是不断钻研我的大脑的，所以我想在这里请教更有经验的开发人员。如果我有更健壮的应用程序，我打算让Redux处理整个状态，并想使用React钩子来处理副作用，我真的需要React钩子吗？我有单独的功能层(containers =>，其中所有的决策都是用redux做出的)和显示层(components =>，其中组件是哑巴
浏览 14提问于2020-07-13得票数 0
我真的很喜欢react context，但我认为它遗漏了一些东西(或者我不知道怎么做)const Home = () => (1)将map idx作为属性传递给SingleTodo，然后从SingleTodo调用TodosList提供程序的方法，将idx作为参数传递
2)给待办事项赋予一个人工然后在TodosProvide
浏览 3提问于2020-05-16得票数 1
请告诉我，当使用react钩子在React组件中来回移动时，我如何只获取一次数据，并且再也不会获取数据。我只是希望它采用这样一种方式，即一旦在组件中第一次获取数据，它就不应该再次获取。在react钩子中使用空数组将使该组件在每次我们再次移动到该组件时获取一次数据。这是一个在reacthooks中使用的示例代码，用于只获取一次数据。
浏览 0提问于2021-07-05得票数 1
1回答
我正在尝试使用redux的Todo应用程序。在这里，我需要存储数据，并在应用程序打开时立即显示出来，这是使用redux持久化的。而且效果很好。我被困在行动中。我在这里初始化了id =0。因此，每当app打开时，它都会存储id =0中的数据，然后递增。在添加新数据时，我如何引用从persist存储的最后一个id并使用它？
浏览 1提问于2018-09-30得票数 0
回答已采纳
1回答
然后，我将在子屏幕中输入详细信息。当我提交详细信息时，我希望使用这些详细信息来更新父屏幕的状态。我之前尝试过JSON.stringfy()，然后JSON.parse()的详细信息，但这并没有帮助我更新状态。
浏览 6提问于2020-07-09得票数 0
这是我的选择器，我可以在选择器中获取数据，但是不知道如何将它调用到视图(组件)中，
import {todos} from '..
浏览 2提问于2017-03-21得票数 4
回答已采纳
我们在哪里保存每个待办事项的"isUpdating“等信息，当用户标记一个待办事项完成，并且涉及到后续的ajax调用以在数据库中将待办事项标记为完成时，我将使用它来显示特定待办事项(而不是待办事项列表)但是如果这些标志保留在组件中，组件如何知道todo上的更新是成功的还是存储更新上的失败呢？
浏览 2提问于2017-05-03得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
