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

如何在switch语句(redux reducer)中更改数组的ids?

在switch语句(redux reducer)中更改数组的ids可以通过以下步骤实现:

  1. 首先,确保你已经引入了redux和redux-thunk等必要的库和中间件。
  2. 在reducer中,定义一个初始状态(initial state),包含一个数组(例如,名为"ids")用于存储ids。
  3. 在reducer中,使用switch语句来处理不同的action类型。针对需要更改ids的action类型,编写相应的case语句。
  4. 在相应的case语句中,使用不可变性原则(immutability)来创建一个新的状态对象。这可以通过使用数组的map方法来实现。
  5. 在map方法中,遍历原始的ids数组,并根据需要更改的条件,对每个元素进行判断和修改。如果满足条件,则返回一个新的对象,否则返回原始对象。
  6. 最后,返回一个新的状态对象,其中的ids数组已经被更新。

以下是一个示例代码:

代码语言:txt
复制
const initialState = {
  ids: [1, 2, 3, 4, 5]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_IDS':
      return {
        ...state,
        ids: state.ids.map(id => {
          if (id === action.payload.oldId) {
            return action.payload.newId;
          }
          return id;
        })
      };
    default:
      return state;
  }
};

// 示例action
const updateIdsAction = {
  type: 'UPDATE_IDS',
  payload: {
    oldId: 3,
    newId: 6
  }
};

// 调用dispatch方法触发action
dispatch(updateIdsAction);

在上述示例中,我们定义了一个名为"UPDATE_IDS"的action类型,它包含了需要更改的旧id和新id。在reducer中的相应case语句中,我们使用map方法遍历ids数组,如果元素的id等于旧id,则返回新id,否则返回原始id。最后,我们返回一个新的状态对象,其中的ids数组已经被更新。

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

相关·内容

redux 文档到底说了什么(下)

手动配置常用中间件和 Chrome 的 dev tool 手动将 slice 分类,并暴露 reducer 手动 Normalization: 将 todos 数据结构变成 {ids: [], entities...: {}} 结构 使用 redux-thunk 来做异步,手动返回函数 手动使用表驱动来替换 reducer 的 switch-case 模式 手动将 selector 进行封装成函数 手动引入 immer...等等的方法,这些 API 用起来就和用 Sequlize 这个库来操作数据库没什么区别,不足的地方是 payload 一定要按照它规定的格式,如 updateOne 的 payload 类型就得这样的...都会返回一个新的数组,如果有组件依赖 filteredTodos,则那个小组件也会被更新。 说白了,todos.filter(...)...了,用回以前的数组,这个过程就是 Memorization。 市面上也有这种库来做 Memorization,叫 Reselect。

78420
  • 手摸手教你基于Hooks 的 Redux 实战姿势

    如果使用新的 Redux Hooks,会更加简单!这里是一个关于 Redux 的速成班,将配合 React 函数组件使用: 1....Redux 使您可以集中存放 JavaScript 应用程序的状态(数据) 它最常与 React 一起使用(通过 react-redux ) 这使您可以从树中的任何组件访问或更改状态。 ? 2....要更改 store 中的数据,请首先编写您的 reducer: reducer 通常使用 switch / case 语句编写,但不是必要的 他们只需要得到一个动作和一个状态,然后返回一个新状态 ?...重要的是,reducer 返回一个新的状态对象(而不是修改旧的对象的属性),这样,当对象中的属性发生某些改变时,组件将重新渲染。...不要在 reducer 中修改 state 中的值,仅返回一个值已经更改的拥有新状态的对象。 ? 9.

    1.5K20

    医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

    因为数据是存放在数组中的,所以我们通过下标 index 来引用特定的任务。而实际项目中一般会在新建数据的时候生成唯一的 ID 作为数据的引用标识。...永远不要在 reducer 里做这些操作: 修改传入参数; 执行有副作用的操作,如 API 请求和路由跳转; 调用非纯函数,如 Date.now() 或 Math.random()。...你要么使用 polyfill,Babel 插件,或者使用其它库如 _.assign() 提供的帮助方法。 switch 和样板代码须知 switch 语句并不是严格意义上的样板代码。...正如其他 reducers,如果 combineReducers() 中包含的所有 reducers 都没有更改 state,那么也就不会创建一个新的对象。...如 “玛丽喜欢42号文章。” 或者 “任务列表里添加了'学习 Redux 文档'”。 你可以在任何地方调用 store.dispatch(action),包括组件中、XHR 回调中、甚至定时器中。

    3.7K10

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    总结 React 中的状态是什么 在现代 React 中,我们使用函数组件构建我们的应用程序。...它被称为 reducer,是因为它与你传递给数组的函数类型相同:Array.prototype.reduce(reducer, initialValue)。...并且在函数里有一个 switch 语句,该语句将读取动作类型,对状态执行相应的动作,并返回更新后的状态。 通常做法是在 reducer 上使用 switch 语句, 并且使用大写字母来声明动作。...它接收默认状态和一个动作(action)作为参数,然后在它里面有一个 switch 语句来读取 action type,执行相应的状态修改,并返回更新后的状态。...你只需要指定一个初始值,它可以是原始值,如字符串和数字、对象和数组。然后在你的组件中使用该 atom,在每次 atom 更改时该组件将重新渲染。

    8.5K20

    freeCodeCamp | Front End Development Libraries | 笔记

    这是 reducer 函数的工作, Redux 中的 reducer 负责为响应 action 而发生的状态修改。...看看你是否可以找到一种方法来返回一个新数组, 其中的项目 action.todo 附加到末尾。 由于 Redux 中的状态不变性, 此挑战的目标是在 reducer 函数中返回一个新的状态副本。...此示例还说明了组件如何具有本地 state : 你的组件仍然在其自己的 state 中本地跟踪用户输入。 你可以看到 Redux 如何在 React 之上提供一个有用的状态管理框架。...看看你是否可以找到一种方法来返回一个新数组, 其中的项目 action.todo 附加到末尾。 由于 Redux 中的状态不变性, 此挑战的目标是在 reducer 函数中返回一个新的状态副本。...此示例还说明了组件如何具有本地 state : 你的组件仍然在其自己的 state 中本地跟踪用户输入。 你可以看到 Redux 如何在 React 之上提供一个有用的状态管理框架。

    65110

    react高频知识点梳理

    很多时候你会使用数据中的 IDs 作为 keys,当你没有稳定的 IDs 用于被渲染的 items 时,可以使用项目索引作为渲染项的 key,但这种方式并不推荐,如果 items 可以重新排序,就会导致...Redux 和 Vuex 有什么区别,它们的共同思想(1)Redux 和 Vuex区别Vuex改进了Redux中的Action和Reducer函数,以mutations变化函数取代Reducer,无需switch...Redux 怎么实现属性传递,介绍下原理react-redux 数据传输∶ view-->action-->reducer-->store-->view。...props 是不可修改的,所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。state 是在组件中创建的,一般在 constructor中初始化 state。...做各种各样的事情,而函数组件不可以;类组件中可以定义并维护 state(状态),而函数组件不可以;除此之外,还有一些其他的不同。

    1.4K20

    React-Redux-DevTools和React-Redux优化

    (storeEnhancer));添加如上三行代码即可完成,效果如下:图片Redux优化当前 reducer 存在的问题:所有的操作都是在一个 reducer 中处理的, 如果项目很复杂, 那么会变得非常难以维护如何解决...拆分 reducer,目前我们的示例项目当中有两个组件分别是 Home 与 About,那么我们这里就将不同组件的 Reducer 进行拆分,更改 reducer.js:Home:// Homelet...,如果项目庞大了就可以很好的方便我们进行维护和管理,接下来还有其它问题需要解决,在解决之前首先我们来看一个东西就是 为什么 Redux 中的处理函数叫做 reducer:因为在数组中也有一个叫做 reducer...函数, 这个函数的特点是: 会将上一次的返回结果作为下一次的参数同理在 Redux 中这个处理函数也会将上一次的返回结果作为下一次的参数, 所以就叫做 reducer关于如上合并拆分之后的 reducer...,在这三个文件中编写对应组件的任务,与对应的处理逻辑。

    24030

    Redux开发实用教程

    * * state 的形式取决于你,可以是基本类型、数组、对象, * 当 state 变化时需要返回全新的对象,而不是修改传入的参数。...* * 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper) * 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。...永远不要在 reducer 里做这些操作: 修改传入参数; 执行有副作用的操作,如 API 请求和路由跳转; 调用非纯函数,如 Date.now() 或 Math.random()。...正如其他 reducers,如果 combineReducers() 中包含的所有 reducers 都没有更改 state,那么也就不会创建一个新的对象。...; 并不是所有的state都适合放在store中,这样会让store变得非常庞大,如某个状态只被一个组件使用,不存在状态共享,可以不放在store中; 参考 新版React Native+Redux

    1.4K20

    React 设计模式 0x1:组件

    useEffect 接受两个参数,分别是: 带有可选的返回语句的函数 可选的返回语句是一个函数,它在组件卸载时执行,用于进行清理工作,如定时器、事件监听器等 可选的依赖项数组 当不传入依赖项数组时,...useEffect 会在每次渲染时执行 当传入依赖项数组时 如果数组为空,则 useEffect 只会在组件挂载时执行 如果数组不为空,则 useEffect 会在组件挂载时执行,以及当数组中的任何值发生变化时执行...以下是一些实现方式: Props Context API Redux useReducer # Props Props 是在 React 中从一个组件传递数据到另一个组件的一种方式,props 是从父组件传递到子组件的对象...Redux 库包括以下三个部分: Store 用于存储全局状态 这一部分是不可变的,即它无法改变 Reducer Reducer 是一个纯函数,它接受两个参数(初始状态和操作),并返回一个新的状态...Actions Action 是一个 JavaScript 对象,告诉 Reducer 用户希望在 Store 中执行什么操作 Action 是用户的指令,用于在 Store 中要么更改状态,要么创建状态的副本

    88610

    把redux当做观察者单独使用

    我们知道在观察者模式中,观察者对象一般会有两个方法,一个用来监听事件,一个用来发布消息,另外其内部一般有一个不可以见的属性来存储事件,这个属性通常为一个数组。...redux会将生成一个store对象,这个对象可以理解为是一个观察者,只不过其内部保存了像树一样的数据结构,而更改数据结构,和更改产生的后果就借鉴了观察者模式。...简单的使用redux的话,有如下几个步骤: 1、导入redux,并导出createstore方法 2、创建reducer 3、调用createstore传入reducer穿件store 4、用store...上面的代码是有点需要优化的,我们在开发时,store往往比较复杂,我们需要将不同的状态保存到不同的reducer中,而不是统一放在一起。...'redux'; // 2、编写第一个reducer const objReducer = (state = { name: 'zs', age: 14 }, action) => { switch

    1.5K21

    React进阶(1)-理解Redux

    它是为了描述Action如何改变组件的状态的 这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var...,数组中当前被处理的元素: 6, 当前元素在数组中的索引: 5, 调用的数组: 1,2,3,4,5,6 VM1742:6 21 上面的代码中是做一个简单的累加,reducer函数接收四个参数,第一个参数是上一次调用返回的结果...,第二个参数是当前被处理的元素的值,第三个是当前元素在数组中的索引,第四个是调用的原数组 这个reduce的方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数 而在Redux...函数要做的事情就是根据state和action的值产生一个新的对象返回给Store,它是定义整个组件应用状态如何更改,根据Action动作行为去更新Store中的状态 注意的是reducer必须是纯函数...if-else或者switch语句,根据action,总是返回一个新的状态,这个新的状态的结果返回给store,store就会将原来上一次的state进行替换更新,最终达到改变state这么一个过程 结语

    1.5K22

    immer:优雅操作react数据状态,告别繁琐克隆拷贝

    状态更新的简洁性:React 的传统方式是通过使用 setState 方法更新状态,需要手动创建新的状态对象或数组,并进行深度克隆。...React 中使用 Immer ,可以避免手动编写深度克隆、合并对象或数组的代码,同时还能保持数据的不可变性,方便进行状态管理和追踪变更。...); export default store; 在上面的示例中,我们在 Redux 的 reducer 中使用 produce 函数来更改状态。...它接收当前状态 state 和表示要进行的更改操作的回调函数。我们可以在回调函数中对 draft 对象进行更改,Immer 会自动处理状态的更新。...# 总结 在使用 React 组件时,可以使用 produce 函数来更新状态,而在使用 Redux 时,可以在 reducer 中使用 produce 函数来进行状态更改操作。

    1.2K20

    Redux 快速上手指南

    具体的模型图如下图所示: 为了说明整个模型的运作流程,首先我们需要弄清Redux模型中的几个组成对象:action 、reducer、store。...action:官方的解释是action是把数据从应用传到 store 的有效载荷,它是 store 数据的唯一来源;要通过本地或远程组件更改状态,需要分发一个action; reducer:action...payload - 用于更新状态的数据。 创建一个Redux存储区,它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问,但只能通过提供的reducer进行更新。...目前,state为undefined或null,要解决这个问题,需要分配一个默认的值给state,使其成为一个空数组。...一个reducer需要处理不同的action类型,因此我们需要一个SWITCH语句。当一个ADD_TO_CART类型的action在应用程序中分发时,switch中的代码将处理它。

    1.3K20

    React进阶(1)-理解Redux

    它是为了描述Action如何改变组件的状态的 这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var...,数组中当前被处理的元素: 6, 当前元素在数组中的索引: 5, 调用的数组: 1,2,3,4,5,6 VM1742:6 21 上面的代码中是做一个简单的累加,reducer函数接收四个参数,第一个参数是上一次调用返回的结果...,第二个参数是当前被处理的元素的值,第三个是当前元素在数组中的索引,第四个是调用的原数组 这个reduce的方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数 而在Redux...函数要做的事情就是根据state和action的值产生一个新的对象返回给Store,它是定义整个组件应用状态如何更改,根据Action动作行为去更新Store中的状态 注意的是reducer必须是纯函数...if-else或者switch语句,根据action,总是返回一个新的状态,这个新的状态的结果返回给store,store就会将原来上一次的state进行替换更新,最终达到改变state这么一个过程 (

    1.2K20

    Redux 包教包会(二):趁热打铁,重拾初心

    可以看到,我们在 switch 语句里面添加了一个 "TOGGLE_TODO" 的判断,并根据 action.id 来判断对应操作的 todo,取反它目前的 completed 属性,用来表示从完成到未完成...Reducers 在 Redux 中实际上是用来处理 Store 中存储的 State 中的某个部分,一个 Reducer 和 State 对象树中的某个属性一一对应,一个 Reducer 负责处理 State...编写 Reducer:todos 在 Redux 最佳实践中,因为 Reducer 对应修改 State 中的相关部分,当 State 对象树很大时,我们的 Reducer 也会有很多,所以我们一般会单独建一个...注意 我们的 todos reducers 只负责处理原 initialState 的 todos 部分,所以这里它的 state 就是原 todos 属性,它是一个数组,所以我们在 switch 语句里...,进行数据改变时,要对数组进行操作,并最后返回一个新的数组。

    2.3K40

    Redux(一):基本概念

    import {createStore } from 'redux'; const store = createStore(reducer); 二、state是只读的 唯一改变state的方法就是触发action...语句,根据不同的action.type执行不同的操作,返回的都是修改后的state树。...例子中,无论是对象还是数组,并没有直接去修改属性会增加元素,返回的都是一个新的对象或数组,这一点很重要,因为在js中对象是按地址引用的,直接修改属性或push一个元素,引用地址并没有发生变化,这会导致出现一些难以控制的情况...所以,在redux中不应该使用如:push、pop、slice等方法。对于数组可以用concat、拓展运算符、map等;对于对象可以用Object.assign()、拓展运算符等。...总结: 可以看到Redux使用的是派发/监听的设计模式,每次派发action,reducer运算结束后会执行在subscribe注册的回调函数。

    1.3K10
    领券