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

Question

如何在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
    }
}

Answer 1

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

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

或

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

Answer 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
     }
}

Answer 3

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

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

Answer 4

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

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

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

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

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

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

Answer 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" 或任何循环。

Answer 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;