Extract State Logic to Redux cannot ad new message

JavaScript
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.

1 Like
4

I came across this thread because I also had issues passing this challenge with a variety of different ways of copying the state and adding the action.message to it
(eg. I tried the above spread operator method, I tried slice and assign to a new variable and then push the msg onto that new variable, I tried concat, etc). None worked.
The only way that worked for me was a switch statement.
In the following challenge (which is a continuation one), the code provided starts out with a switch as well, so perhaps this is why nothing else I tried got past the challenge test suite.
I’m just writing this post now to help anyone who is looking on the forum having tried obvious solutions that failed. Try a switch statement…

5

I just copy pasted the above code (corrected) and it gives no problem^^
What browser you using? The OP is on firefox, I’m on firefox ESR, chances you’re using chrome?

Here is the code I tried:

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

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

}else{
  return state;
}

}
const store =Redux.createStore(messageReducer);
6

Hi there, yes, i am using the latest chrome browser.

1 Like
7