Action Help with Redux

JavaScript
1

Good evening Redux gurus! Please have a look, I can’t seem to get this figured, this is as close as I could get.

Your code so far


const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // change code below this line
    case ADD_NOTE: 
      return {
        state: addNoteText(text)
      };
    // change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // change code below this line
  return {
    type: ADD_NOTE,
    text: note
  }
  // change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());

Your browser information:

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

Link to the challenge:

2

Yup, redux will mess with your head when you first learn it. Yup. But once you get it, it’s a great tool.

Some thoughts:

      return {
        state: addNoteText(text)
      };

What is state? In this reducer, according to the setting of initial state, it is a string. But here you are returning an object. State is a string so you should return a string. (It’s a little odd to set the initial state to the string 'Initial State', but that was what was given to you, so don’t worry about it.) The instructions tell you:

…it should return the text property on the incoming action as the new state. So, first of all, it should be a property of the action variable you are getting, and it shouldn’t be wrapped in an object. Where is this text data? Notice that what you return from the action creator:

  return {
    type: ADD_NOTE,
    text: note
  }

That is what goes into the reducer as the variable action. You can see where the property type is used. Now do something similar to get the text data that you want.

When I make those changes, it passes.

Don’t get frustrated. This is hard. A year and a half ago I was struggling with Redux too. Now I do it for a living. YMMV. Just keep at it - it’s frustrating but worth it.

3

I should mention, I tried {state: action.text} as well

4

I should mention, I tried {state: action.text} as well

That’s closer. It’s the right data, but it’s wrapped in an object. You aren’t supposed to return an object that contains state, but should return state itself.

5

Ooooooooo gees. Perfect. that makes so much more sense. For some reason, with Redux, it feels like its hard to see the forest for the trees! Thank you for the help!

6

Yes, Redux is bat crap crazy and makes no sense. Until it makes sense and then it is awesome. But yeah, what you’re feeling right now is completely normal.

1 Like