1

I have a React / Redux application and am using redux-logger to show the state changes. I have some strange behaviour, wherby the resulting state contains an _id property. For example, this information below shows my output from the logger:

prev state:

{
    title: ""
}

action object:

{
    title: "New title"
}

next state:

{
    _id: ObjectID,
    title: "New title"
}

Below is my reducer function:

function updateState(state = initialState.obj, action) {
    switch (action.type) {
        case 'SET_TITLE':
            var newState = Object.assign({}, state, action.obj);
            return newState;
        default:
            return state;
    }
}

and initialState is:

{
    obj: {
        title: ""
    }
}

and the action payload is:

{
    type: 'SET_TITLE',
    obj: {
        title: "New Title"
    }
}

and the dispatcher is as follows:

// Call to API to get data from MongoDB...
let dataObj = response.data;
let newObj = {
    title: dataObj.title
};
dispatch({
    type: 'SET_TITLE',
    obj: newObj
});

Why is the _id propery being added?

JoeTidee
  • 24,754
  • 25
  • 104
  • 149
  • I assumed it to be irrelevant given that this is what redux-logger is pushing to the browser console. – JoeTidee Feb 03 '17 at 13:50
  • @JoeTidee if you have `var newState = Object.assign({}, state, action.obj);` the new state will be the shallow copied, so to have the `_id` inside the action.obj you need to have the key `_id`. Check [here](http://stackoverflow.com/questions/24512712/what-is-the-difference-between-a-shallow-copy-and-a-deep-copy-with-javascript-ar) – prosti Feb 03 '17 at 23:03
  • Not sure I understand... I don't want the _id attribute, but it is appearing after the state change. – JoeTidee Feb 03 '17 at 23:12

1 Answers1

0

Nothing to worry about. Your initial state may even be an empty object.

{ }

And as your application traverses the states calling the reducer every time and creating new states

new_state = reducer_function(current_state, action);

Your Store object (state) may get different keys. You must try to understand what may enter the state, and to get the conclusion about the _id key. Generally, the Store may be very complicated and big.

After you last update I understood the problem better, you are adding te object to the state.

var action = new Object;
action.title = "New Title";
var state = {
    title: "Title",
    desc: ""
}
console.log(state);

var newState = Object.assign({}, state, { title: action.title });
console.log(newState);

In your case "New Title" will be action.title.

This Object.assign() is new to ES6 btw.

prosti
  • 42,291
  • 14
  • 186
  • 151
  • The reducer only has one function and that is to update the title - I will edit the question to show the reducer. – JoeTidee Feb 03 '17 at 16:19
  • @JoeTidee, I think when React is not having the object as { key : value } pair it will automatically add the `_id` as a key. – prosti Feb 03 '17 at 21:46
  • Aplogies, my edit was conflicting with the original question, so i have updated it to remove the desc and to show initialState. This way, there should be no need to have it in the form { key : value }. The redux-logger output show that the object that is merged with the initial state does not conatain any _id, so wondering where it is coming from. – JoeTidee Feb 03 '17 at 22:23
  • There are several versions out there. – prosti Feb 03 '17 at 22:41
  • I don't have any idea abut the `_id` then I searched that redux-loger project for the `_id` part and looks and I haven't found it via string search. There is one another redux-loger project just for your info. – prosti Feb 03 '17 at 22:57
  • I generally see a problem if we don't write `var newState = Object.assign({}, state, { title: action.title });` and write `var newState = Object.assign({}, state, action.title );` – prosti Feb 03 '17 at 22:57
  • I don't think it is a problem with redux-logger, because the actual state also has the _id in it, so logger is correctly reflecting the state. – JoeTidee Feb 03 '17 at 23:05
  • I also updated the original quesiton to show that it still happens when the key/value pattern is used. – JoeTidee Feb 03 '17 at 23:06
  • @JoeTidee, you checked this and I fully agree. However, I checked. – prosti Feb 03 '17 at 23:06
  • Thanks @JoeTidee, this is a very interesting question. – prosti Feb 03 '17 at 23:07