如何添加一个元素到数组中的反应本机归约的减少器？

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

两个不同的选项将项添加到数组中而不发生变化

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

或者

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

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

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

我有样本

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;

因为这个问题曝光率很高:

如果你正在寻找这个问题的答案，有一个很好的机会，您正在遵循一个非常过时的 Redux 教程。

官方建议(自2019年以来)为 使用官方的 Redux 工具包编写现代的 Redux 代码。

在其他方面，这将消除字符串操作常量，并为您生成操作创建器。

它还将使用一些方法，这些方法允许您在由 createReducer或 createSlice创建的 Reducers 中编写变异逻辑，因此首先应该使用 在现代的 Redux 中，没有必要用 Reducers 编写不可变的代码。

请遵循 官方教程而不是第三方教程来获得关于好的 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;

如果您想要组合两个数组，一个接一个，然后您可以使用

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

这个扩展操作符(...)迭代数组元素并存储在数组[]中或数组中的扩展元素中，您可以简单地使用“ 为了 循环”或任何其他循环来完成这些操作。

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

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

concat()在不改变状态的情况下输出更新后的数组。只需将数组设置为 concat()的输出并返回状态即可。

这招对我很管用

//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;
}
};