Redux:使用Redux更新数组的状态

Question

问题如下：

在manageFriends.js中，编写一个名为manageFriends的函数，该函数以前一个状态和一个操作为参数。这里，初始状态应该是一个对象，其键friends设置为空数组。这一次，减速器应该能够处理两个动作，"；好友/添加"；以及"；好友/删除"；。添加好友时，操作将包括分配给具有名称、家乡和id密钥的对象的好友密钥。

action = {
type: "friends/add",
payload: {
name: "Chrome Boi"
homewtown: "NYC",
id: 1
}
} 

当我们的减速器接收到"；好友/添加"；，它应该返回一个新的状态，将这个friend对象添加到friends数组中。

这是我的代码，我正在js浏览器控制台中运行

function manageFriends(state = {friends: []},
action = {
type: "friends/add",
payload: {
name: 'Mac Miller',
hometown: 'Arizona',
id: 1
},
payload: {
name: 'Kirk Franklin',
hometown: 'ATL',
id: 1
},
type: "friends/remove",
payload: 1,
}){
switch (action.type) {
case 'friends/add':
return {friends: [...state.freinds, action.payload]}
case 'friends/remove':
return {
friends: state.friends.filter((friend) => friend.id !=action.payload)
};
default:
return state;
}
}
manageFriends(state, action)

当我运行reducer时，我仍然得到一个空数组。

{friends: Array(0)}
friends: Array(0)
length: 0
[[Prototype]]: Array(0)
[[Prototype]]: Object

我发现这个例子对switchcase语句有帮助。但我认为问题围绕着行动。

我以前测试过这个功能这对我来说非常好

let state = {presents : true}
function managePresents(state, action){
action = {
type: "presents/increase",};
switch (action.type) {
case 'presents/increase':
return { presents: !state.presents}
default:
return state;
}
}
managePresents(state, action)

结果：｛presents:false｝

关于如何使用redux更新数组(朋友(的状态有什么想法吗

Answer 1

问题是您试图用一个简单的函数做太多的事情。Action应该有两个关键参数TYPE和PAYLOAD，而不是多个结合在一起的语句。

如果您尝试一次运行一次(manageFriends(功能，将会有所帮助。或者尝试使用循环/forEach如果您需要多次运行它。

const initialState = { friends: [] };
let action = {
type: 'friends/add',
payload: {
name: 'Mac Miller',
hometown: 'Arizona',
id: 1,
},
};
function manageFriends(state, action) {
switch (action.type) {
case 'friends/add':
return { friends: [...state.friends, action.payload] };
case 'friends/remove':
return {
friends: state.friends.filter((friend) => friend.id != action.payload),
};
default:
return state;
}
}

manageFriends(initialState, action);