React and Redux - Extract State Logic to Redux

Ndiaye · August 31, 2022, 9:34am

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:

kevinSmith · August 31, 2022, 9:46am

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.

Ndiaye · August 31, 2022, 10:18am

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
ReferenceError: Can’t find variable: createStore

kevinSmith · August 31, 2022, 10:26am

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

Ndiaye · August 31, 2022, 10:45am

Before we go further, is this right? :

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

kevinSmith · August 31, 2022, 10:54am

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?

Ndiaye · August 31, 2022, 11:03am

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.

???

kevinSmith · August 31, 2022, 11:26am

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.

kevinSmith · August 31, 2022, 11:27am

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

Ndiaye · August 31, 2022, 11:39am

Thanks ! You always right
I passed it by doing this

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.

kevinSmith · August 31, 2022, 12:16pm

I don’t think my wife would agree.

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.

kevinSmith · August 31, 2022, 12:46pm

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

Ndiaye · August 31, 2022, 1:33pm

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:

Ndiaye · August 31, 2022, 1:37pm

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

kevinSmith · August 31, 2022, 2:10pm

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.

Ndiaye · August 31, 2022, 2:25pm

Yes I understand

This is shorter and cooler.

Thanks again

system · March 2, 2023, 2:25am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
React and Redux - Extract State Logic to Redux JavaScript	2	42	April 19, 2025
React and Redux - Extract State Logic to Redux JavaScript	2	175	February 26, 2024
Extract State Logic to Redux ,some problem JavaScript	2	468	February 2, 2021
Extract State Logic to Redux JavaScript	2	990	February 2, 2021
Extract State Logic to Redux - addMessage JavaScript	3	821	February 2, 2021

React and Redux - Extract State Logic to Redux

Related topics