Extract State Logic to Redux cannot ad new message

Extract State Logic to Redux cannot ad new message
0.0 0

#1

Tell us what’s happening:
The last
Dispatching addMessage against the store should immutably add a new message to the array of messages held in state.

Your code so far


// define ADD, addMessage(), messageReducer(), and store here:
const initialstate = {
    arr:[]
}

const ADD = 'ADD';
function addMessage(message){
 
return {type:ADD,
 message: message};
};
const  messageReducer=(state=initialstate.arr, action)=>{
if (action.type===ADD){
return {...state, arr: [...state.arr, action.message]    }

}else{
  return state;
}

}
const store =Redux.createStore(messageReducer);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/extract-state-logic-to-redux


#2

Mh, seems you’re trying to use much more stuff than needed ^^

In your initialstate definition you’re not asked to create an object with a key:value pair named arr:[], the challenge asks for an initialstate equal to an empty array. As simple as initialstate= []^^
This is not an error, but why to have your variable nested into an object when you can use it as is :wink:
(in the reducer obviously you will replace initialstate.arr with initialstate if you follow along)

The error is in the first return statement of the reducer: you should return the old messages with the new one added.
Here a link for the spread operator ( MDN - Spread operator ) : you can use it simply ‘spreading’ the old values and adding the new one ( almost as you did into the arr definition of that statement.

The spread operator is not mandatory though: you can use concat array method ( MDN - Array.prototype.concat ) like oldarray.concat(newValueToAddToTheOldArray) and everything will be fine aswell ^^


#3

because I try the simple solution already.

const initial = []
const  messageReducer=(state=initial, action)=>{
if (action.type===ADD){
 return [...state, action.message];

It’s not working: I try and now it’s working without that, but I swear yesterday did not.