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

OR

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

我有一个样品

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 创建的 Reducers 中编写可变逻辑的方法，因此 无需在现代 Redux 中的 Reducers 中编写不可变代码 首先是。

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

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

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

6 个答案: