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

push 不是 return 数组，而是它的长度 (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 2

将项目添加到数组而不改变的两个不同选项

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

或

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

Answer 3

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

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

Answer 4

我有样品

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;

Answer 5

由于这个问题得到了很多关注：

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

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

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

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

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

相比之下，在现代 Redux 中，这看起来像

const userSlice = createSlice({
  name: "user",
  initialState: {
    arr:[]
  },
  reducers: {
    // no ACTION_TYPES, this will internally create a type "user/addItem" that you will never use by hand. You will only see it in the devTools
    addItem(state, action) {
      // you can use mutable logic in createSlice reducers
      state.arr.push(action.payload)
    }
  }
})

// autogenerated action creators
export const { addItem } = slice.actions;

// and export the final reducer
export default slice.reducer;

Answer 6

如果你想合并两个数组，一个接一个，那么你可以使用

//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]
...

这个 Spread 运算符 (...) 迭代数组元素并存储在数组 [ ] 内或数组中的展开元素，您可以简单地使用 "for loop" 或任何其他循环。

Answer 7

嵌套数组最简单的解决方案是concat():

case ADD_ITEM: 
    state.array = state.array.concat(action.paylod)
    return state

concat() 在不改变状态的情况下吐出一个更新的数组。只需将数组设置为 concat() 和 return 状态的输出。

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

How do I add an element to array in reducer of React native redux?

react-native

redux

react-redux