React and Redux - Extract State Logic to Redux

Tell us what’s happening:
Hello dear campers ! please what did I do wrong ?

  **Your code so far**
// Define ADD, addMessage(), messageReducer(), and store here:

const ADD =  'ADD';

const addMessage = (message) => {
return {
  type: 'ADD',
}
}

function messageReducer(state = [], action){
switch(action.type) {
  case ADD:
  return {
    ...state, 
    message: action.message
  }
  default:
  return state
}
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Challenge: React and Redux - Extract State Logic to Redux

Link to the challenge:

A couple small problems here:

const addMessage = (message) => {
return {
  type: 'ADD',
}
}

You defined the const ADD, why not use that? I don’t think that breaks your code, but that is best practice.

The instructions say:

You’ll need to pass a message to this action creator and include the message in the returned action.

You didn’t do that, the message needs to be passed on the action.


  return {
    ...state, 
    message: action.message
  }

What is the shape of state? Look at the initial state (the default in the reducer parameters) and look at this. This implies that it is an object with a “message” property. That is not what the reducer state is supposed to be.


You didn’t do this from the instructions:

Finally, create your Redux store and pass it the reducer.


When I fix those, your code passes for me.

I don’t understand well what you mean here since the instruction says to define an action creator addMessage() which creates the action to add a message.

I came up with this :

const addMessage = (message) => {
return {
type: ‘ADD’,
text: ‘message’
}
}

[quote=“kevinSmith, post:2, topic:549420”]
What is the shape of state? Look at the initial state (the default in the reducer parameters) and look at this. This implies that it is an object with a “message” property. That is not what the reducer state is supposed to be.[/quote]

function messageReducer(state = , action){
switch(action.type) {
case ADD:
return […state, action.message]
default:
return state
}
}
}
}

I tried this since the initial state is an array.

const store = createStore(messageReducer)

Sorry I forgot this part. But there is still an issue here because it says :slight_smile:
ReferenceError: Can’t find variable: createStore

Right, I mean this:

type: ‘ADD’,

You are using the string literal 'ADD' instead of the variable ADD that already contains that string. It works, but it is better to use the const ADD.


I came up with this :

const addMessage = (message) => {
return {
type: ‘ADD’,
text: ‘message’
}
}

This:

text: ‘message’

will add a property “text” that will have the string “message”. Is that what you want? Look at how your reducer is using it:

return […state, action.message]

It looks like the action should have a property “message”. What is stored in there?


I tried this since the initial state is an array.

Yeah, that looks right to me. The reducer state is an array of strings, which are our messages.


Sorry I forgot this part. But there is still an issue here because it says :slight_smile:
ReferenceError: Can’t find variable: createStore

It’s hard to see because we are in the little FCC IDE but I think that is available on the module Redux, so you would access it as Redux.createStore. True, it could have been set up so createStore was a standalone function, but it wasn’t in this case.

Before we go further, is this right? :

const addMessage = (message) => {
return {
type: ADD,
message: ‘message’
}
}

This:

type: ADD,

is right, that is the point I was trying to make.

This:

message: ‘message’

is better. It has the right property name, but what you are storing in there is the string literal “message” - the message will be the text “message”. We don’t want that, we want the string that was passed into the action creator. For example, if I had an action creator to store a record, it might look like

const storeRecord = record => {
  return {
    type: STORE_RECORD,
    record: record
  }
}

Or, using ES6 shorthand I could do:

const storeRecord = record => {
  return {
    type: STORE_RECORD,
    record
  }
}

since the property and the variable have the same name.

I would not do this:

const storeRecord = record => {
  return {
    type: STORE_RECORD,
    record: "record"
  }
}

because my record would just be the string “record”.

Does that make sense?

We agree that there is no difference between this :

const addMessage = message => {
return {
type: ADD,
message: “message”
}
}

and this :

const storeRecord = record => {
return {
type: STORE_RECORD,
record: “record”
}
}

Right ? sense of syntax I mean

If yes why it keep telling me :

The action creator addMessage should return an object with type equal to ADD and message equal to the message that is passed in.

???

Yes, they are the same. That is the problem, they are both wrong.

You have this:

const addMessage = message => {
  return {
    type: ADD,
    message: "message"
  }
}

Here you are sending a string literal "message". Just like this:

const addMessage = message => {
  return {
    type: ADD,
    message: "peanut butter pajamas"
  }
}

would send the string literal "peanut butter pajamas".

We don’t want to hard code a string there. We want to send the parameter message that we passed into the action creator.

The message that is passed in. That is in that parameter called message.

Thanks ! You always right :grin:
I passed it by doing this :slight_smile:

const addMessage = message => {
return {
type: ADD,
message: “message”
}
}

function messageReducer(state = , action){
switch(action.type) {
case ADD:
return […state, action.message]
default:
return state
}
}

Is there a better way to write this ? Am I the only one to spend hours on React Redux and JS algorithm every single challenge ?

I am so scared to look at the solution. I did some times but I know that it make me to feel less confident.

I have to thank you for your time. You make me to not look at the solution.

I don’t think my wife would agree. :wink:

Am I the only one to spend hours on React Redux and JS algorithm every single challenge ?

Yes, you are the only one confused by this stuff. Oh, no, wait, the opposite of that. Most people get confused by this stuff, I know I did. Algorithms are hard. But the more you do, the easier they get. And redux is weird. It is a very different way of thinking. It seems unnecessarily complex and when you are learning it it is not clear why you need it or why it has to be this weird or even how it works. But I assure you, if you do React, you want to know redux. (And there are applications outside React.) It seems really weird at first but it is actually really powerful and helps you right much cleaner code.

Is there a better way to write this ?

Within the confines of redux?

Most people would write the action creator this way:

const addMessage = message => ({ type: ADD, message })

using the implicit return of an arrow function. Some might spread it over 2-4 lines, depending on how they like to format things.

Usually you define your initial state separately:

const initialState = []

function messageReducer(state = initialState, action){
  // ...

But those are stylistic things.

The other thing I’d say is to format your code as you go. I know it’s a pain but it becomes second nature and it really, really saves time. We spend a lot more time reading code than writing it, so making it easier it to read makes our jobs easier, especially when you have to read through 1000 lines of code.

But other than that, that’s basic redux. That’s how you write it. It might be split into different files, but that’s the idea.

1 Like

And just to be clear, the action creator you just shared is still wrong. But perhaps it was a cut and paste mistake.

1 Like

Thank you it was really helpful.

I was outside and I did it with my phone.

My code that passed the challenge is :

// Define ADD, addMessage(), messageReducer(), and store here:

const ADD= ‘ADD’;

const addMessage = message => {
return {
type: ADD,
message: message
}
}

function messageReducer(state = , action){
switch(action.type) {
case ADD:
return […state, action.message]
default:
return state
}
}

const store = Redux.createStore(messageReducer)

Thank you for your time grinning:

Of course I did not need this : message: ‘message’
I need this : message: message

Right, that works. And like I said, if the property name and the variable name are the same (like they are here) then we can shorten it like this:

return {
  type: ADD,
  message
}

You can read about it here.

1 Like

Yes I understand :grinning:

This is shorter and cooler.

Thanks again

1 Like