如何在React Native Redux的还原器中添加一个元素

Question

如何在还原器中的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不返回数组，而是它的长度（文档），因此您正在做的是用其长度替换数组，从而失去了对其所拥有的唯一引用。尝试以下操作：

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年起）是使用官方的Redux工具包编写现代Redux代码。

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

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

请遵循官方的Redux教程，而不是第三方教程，以始终获取有关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 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]
...

此传播操作员（...）迭代数组元素并存储在数组中[]或在数组中传播元素，您可以简单地使用＆quot＆quot＆quot' for 循环＆quot;或与任何其他循环。

Answer 6

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

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

concat()吐出更新的数组，而无需突变状态。只需将数组设置为concat()的输出并返回状态。

Answer 7

我有一个样本

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 8

这对我有用

//Form side
const handleSubmit = (e) => {
e.preventDefault();
let Userdata = { ...userdata, id: uuidv4() };
dispatch(setData(Userdata));
};

//Reducer side
const initialState = {
data: [],
};
export const dataReducer = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.SET_DATA:
  return { ...state, data: [...state.data, action.payload] };
default:
  return state;
}
};

Answer 9

对我来说，我的redux商店看起来像这样：

export const cartSlice = createSlice({
  name: "cart",
  initialState: {
    itemsAdded: [],
    total: 0,
  },
  reducers: {
    addItem: (state, action) => {action.payload };
      state.itemsAdded.push(action.payload);
    },
  },
});

简单地我添加到我的数组itemsAdded， state.itemsAdded.push(action.payload);