Send Action Data to the Store - not sure about this error message

Tell us what’s happening:

I keep getting this error message “Dispatching an action of type ADD_NOTE with the addNoteText action creator should update the state to the string passed to the action creator.”
I thought it is saying addNoteText is not returning an object that contains the content of the ‘note’ variable. But it is in the return object, and I also console.log to verify result (action.text) is equal to ‘Hello!’. So I m not sure why it is still failing?

Your code so far


const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  //console.log(action.text);
  switch(action.type) {
    // change code below this line
    case ADD_NOTE:
      return {
        text: action.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 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0.

Link to the challenge:

The error is a bit cryptic, but I assume is because you are changing the “shape” of your store.

You started with a string

state = 'Initial State'

But after your action you are changing state to an Object:

state = { ... }

Try keeping the state in the same “shape” as it was originally :slight_smile:

1 Like

I updated the code to return just the String action.text and it passes.

I also tried replacing the initial state with an object ({text:“Initial State”}) but it didnt work.

So now I am a little confused. Originally I though the state should always be of object type, but it appears that you can set it to any type, and your subsequent state need to follow the type as the initial state, am I correct?

1 Like

I think it won’t work since the challenges test expects a string, regardless if you manually change it or not;
which is one of the advantage of test driven development btw :wink:
but that’s another topic.
To be sure we should check the source code for this challenge and see what’s the test expect.

That’s correct, Redux state is stored in a single object.

However as the app grows you can imagine that this state can become super crowded with so many different portion of your UI, that it becomes unmanageable.

So you can split reducers into smaller chunks that manage a singe portion of the state, but then gets combined into a single object.
(more on the official docs. note is quite advanced as concept).

I assume FCC splits the reducer under the hood for you, in order to keep things tidy and clean.

Technically the only requirement from Redux is that at the end of the day the sate is an Object.
So in your own app you can change “the shape” of portion of your state as you please, however that define the purpose of a state manager that aim to keep the data consistent.

Imagine that I have a state:Object with a property a:Array and a portion of my app that is reading a value inside a

const state = {
 a:  [5]
}

/* somewhere in my app I read this value */
<p>You have {state.a[0]} unread messages</p>


// an action occurs
state.a = "Now I'm a string".

// what happens to the portion of the UI that was reading `a[0]`??

Hope it’s more clear now :wink: