Redux：使用 Redux 更新阵列的 State

Question

Here is the question:

In manageFriends.js, write a function called manageFriends that takes in the previous state and an action as its argument. Here, the initial state should be an object with a key, friends, set to an empty array. This time, the reducer should be able to handle two actions, "friends/add" and "friends/remove". When adding a friend, the action will include a friend key assigned to an object with name, hometown, and id keys.

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

When our reducer receives "friends/add", it should return a new state with this friend object added to the friends array.

Here is my code, which I am running in my js browser console

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)

when I run the reducer I still get an empty array.

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

I founds this example that helped with the switch case statement. But I think the issue revolves around the action.

I previous tested this function This worked perfectly fine for me

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)

Result: {presents: false}

Any Ideas on how to update the state of the array (friends) using redux?

Answer 1

The issue is that you're trying to do too much with a simple function. Action is supposed to have two key arguments, TYPE, and PAYLOAD, Not multiple statements that sucked together.

It would help if you tried to run the function Once(manageFriends ) at a time. Or try to use a loop/forEach If you need to run it multiple times.

 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);