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

Question

这里是问题：

在 manageFriends.js 中，编写一个名为 manageFriends 的函数，它将先前的状态和一个动作作为其参数。在这里，初始状态应该是一个对象，其键 friends 设置为空数组。这一次，reducer 应该能够处理两个动作，“friends/add”和“friends/remove”。添加朋友时，该操作将包括分配给具有名称、家乡和 ID 键的对象的朋友键。

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

当我们的 reducer 收到“friends/add”时，它应该 return 一个新的状态，这个朋友对象被添加到 friends 数组中。

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

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)

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

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

我找到了这个有助于 switch case 语句的例子。但我认为问题围绕着行动。

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

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)

结果：{呈现：false}

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

Answer 1

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

如果您尝试一次运行函数 Once(manageFriends ) 会有所帮助。或者尝试使用 loop/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);

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

Redux: Updating State of an array using Redux

javascript

arrays

redux