Redux action creator object has 2 values assigned to single key

JavaScript
1

Tell us what’s happening:

In below code I didn’t understand

return {
  type: ADD_TO_DO,
  todo
}

( https://www.freecodecamp.org/learn/front-end-libraries/redux/define-an-action-creator ) here action object only has 1 property ( key: value ) pair but above example has got 2 values assigned to same key ?

Is this new JS syntax ?

Your code so far


const ADD_TO_DO = 'ADD_TO_DO';

// A list of strings representing tasks to do:
const todos = [
'Go to the store',
'Clean the house',
'Cook dinner',
'Learn to code',
];

const immutableReducer = (state = todos, action) => {
switch(action.type) {
  case ADD_TO_DO:
    // Don't mutate state here or the tests will fail
    return state.concat(action.todo);
  default:
    return state;
}
};

const addToDo = (todo) => {
return {
  type: ADD_TO_DO,
  todo
}
}

const store = Redux.createStore(immutableReducer);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Never Mutate State

Link to the challenge:

2

solution

const ADD_TO_DO = "ADD_TO_DO";

// A list of strings representing tasks to do:
const todos = [
  "Go to the store",
  "Clean the house",
  "Cook dinner",
  "Learn to code"
];

const immutableReducer = (state = todos, action) => {
  switch (action.type) {
    case ADD_TO_DO:
      // don't mutate state here or the tests will fail

      return state.concat(action.todo);
    // or return [...state, action.todo]

    default:
      return state;
  }
};

// an example todo argument would be 'Learn React',
const addToDo = todo => {
  return {
    type: ADD_TO_DO,
    todo
  };
};

const store = Redux.createStore(immutableReducer);
Happy coding
3

can you please check my question again ?

I’m not asking for solution but clarification regarding syntax

4

ok sure i will check

5

this is the mistake
in todo you kept (todo) you should keep only todo
const addToDo = (todo) => { this first line bracket you should not keep
return {
type: ADD_TO_DO,
todo
}
}

you should keep
const addToDo = todo => {
return {
type: ADD_TO_DO,
todo
}
}

6

totally wrong answer, can you re-read my question ?

7

not when i run that i got correct

8

const action = {

type: ‘LOGIN’

}

// Define an action creator here:

function actionCreator() {

return action;

}

9

The action object can have more properties than just a type property. So in this case, in the reducer you also will have access to action.todo, todo is what gets passed to the action creator function. Some conventions put this data on a payload property on the object.

const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    payload: todo
  }
}
1 Like
10

@anon57113136 I have blur your solution code.

Instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

If you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

1 Like
11

Thanks for clarification.

Can you please remove @anon57113136 posts altogether as they are not at all related to what I have asked

12

I don’t think we need to remove the posts. People try the best they can to help, we are all allowed to make mistakes. It’s OK to flag spoilers though.

Oh and I forgot to mention this. There are not two values on one property (you can tell because they are comma separated). Using the same value for both the key and value is a shorthand.


1 Like
13

Superb, thanks for this additional info