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