如何在 React native redux 的 reducer 中向数组添加元素？

Posted 2023-02-16

技术标签:

【中文标题】如何在 React native redux 的 reducer 中向数组添加元素？【英文标题】：How do I add an element to array in reducer of React native redux? 【发布时间】：2017-04-16 02:58:17 【问题描述】：

如何在reducer 的redux 状态数组arr[] 中添加元素？我正在这样做-

import ADD_ITEM from '../Actions/UserActions'
const initialUserState = 
    arr:[]


export default function userState(state = initialUserState, action)

    console.log(arr);
    switch (action.type)
    
        case ADD_ITEM: 
            return  
                      ...state,
                      arr: state.arr.push([action.newItem])
                   

        default:
            return state

【问题讨论】：

【参考方案1】：

将项目添加到数组中的两个不同选项

case ADD_ITEM :
    return  
        ...state,
        arr: [...state.arr, action.newItem]

或

case ADD_ITEM :
    return  
        ...state,
        arr: state.arr.concat(action.newItem)

【讨论】：

哪一个更可取？ @sapht 如果您在 ES6 中编写代码，则更喜欢第一个更具可读性和优雅的 IMO。另外，第一个是纯的，第二个不是。来自 Redux 文档：“reducer 保持纯净非常重要。你不应该在 reducer 中做的事情：1. 改变它的参数；2. 执行 API 调用和路由转换等副作用；3. 调用非纯函数，例如 Date.now() 或 Math.random()。" @CharmingRobot 第二个函数到底怎么不纯？ 1.它不会改变论点； 2：没有任何副作用； 3. Array.prototype.concat 是一个纯函数； @CharmingRobot concat() 不会改变原始数组。【参考方案2】：

push 不返回数组，而是返回数组的长度（docs），所以你正在做的是用它的长度替换数组，失去你对它的唯一引用。试试这个：

import ADD_ITEM from '../Actions/UserActions'
const initialUserState = 

    arr:[]


export default function userState(state = initialUserState, action)
     console.log(arr);
     switch (action.type)
        case ADD_ITEM :
          return  
             ...state,
             arr:[...state.arr, action.newItem]
        

        default:return state

【讨论】：

谁能用Object.assign回答这个问题，请教一下状态内数组的变化？为什么需要Object.assign？它用于对象，本质上是一样的。如果您有arr:[...state.arr, action.newItem]，则可以使用obj: Object.assign(, state.obj, action.newItem，前提是obj 和newItem 是对象。如果你想对整个州这样做，你可以这样做Object.assign(, state, arr: [..state.arr, action.newItem]) @martinarroyo，谢谢，所以我做到了：

var obj =      isLoading: true,     data: ['a', 'b', 'c', 'd']   var newObj = Object.assign(, obj,  data: [...obj.data, 'e'] );

它给了我这个： isLoading: true, data: [ 'a', 'b', 'c', 'd', 'e' ] for newObj 这足以满足我的需要。但是我想使用没有扩展运算符的 Object.assign 来产生相同的结果。这可能吗？ @Vennesa 我猜你可以用[].concat(obj.data, ['e']) 替换它，如果你不想使用 ES6 特性的话。 Object.assign 用于对象，尽管在数组上使用它不会给您任何错误，但结果不是数组的串联。如果你尝试Object.assign(, [1, 2, 3], [4])，你会得到[4, 2, 3]。【参考方案3】：

如果需要插入到数组中的特定位置，可以这样做：

case ADD_ITEM :
    return  
        ...state,
        arr: [
            ...state.arr.slice(0, action.pos),
            action.newItem,
            ...state.arr.slice(action.pos),
        ],

【讨论】：

我在这里偶然发现......虽然这个答案并不完全符合上述问题。尽管如此，这正是我想要的。我正在寻找一种在数组的特定索引中插入对象的方法。因此，我对答案投了赞成票。这很有帮助，节省了我一些时间。谢谢！【参考方案4】：

由于这个问题得到了很多曝光：

如果你正在寻找这个问题的答案，很有可能你正在学习一个非常过时的 Redux 教程。

官方推荐（自 2019 年起）是use the official Redux Toolkit to write modern Redux code。

除其他外，这将消除字符串动作常量并为您生成动作创建者。

它还将采用允许您在由 createReducer 或 createSlice 创建的 Reducer 中编写变异逻辑的方法，因此 在现代 Redux 中无需在 Reducers 中编写不可变代码首先。

请关注official Redux tutorials 而不是第三方教程，以始终获取有关良好 Redux 实践的最新信息，还将向您展示如何在不同的常见场景中使用 Redux Toolkit。

【讨论】：

@coderzzz18 如果您可以将其标记为答案，那就太好了，因为当前标记的答案在技术上是正确的，但可能会引导人们遵循我们不建议学习的 Redux 风格/教书了。【参考方案5】：

如果你需要一个接一个地添加数组，那么你可以使用

//initial state
const initialState = 
   array: [],


...
case ADD_ARRAY :
    return  
        ...state,
        array: [...state.array, ...action.newArr],
    
//if array = [1,2,3,4]
//and newArr = [5,6,7]
//then updated array will be -> [1,2,3,4,5,6,7]
...

这种传播语法 (...) 迭代数组元素并存储在数组 [ ] 中，您可以简单地使用 "for loop" 或任何循环。

【讨论】：

【参考方案6】：

我有一个样品

import * as types from '../../helpers/ActionTypes';

var initialState = 
  changedValues: 
;
const quickEdit = (state = initialState, action) => 

  switch (action.type) 

    case types.PRODUCT_QUICKEDIT:
      
        const item = action.item;
        const changedValues = 
          ...state.changedValues,
          [item.id]: item,
        ;

        return 
          ...state,
          loading: true,
          changedValues: changedValues,
        ;
      
    default:
      
        return state;
      
  
;

export default quickEdit;

【讨论】：

添加一些描述