Why initialState doesn't show undefined fields but keeps null fields in redux?

Question

During development, I've found that fields in intialState gets eliminated from redux devtools as I declare them undefined. However, when I declare them as null, they appearing back again in the devtool. Why it is happening?

My initial state (pending: undefined)

const initialState = {
    data: null,
    pending: undefined,
    error: null
};

pending disappears from redux devtool:

Same initial state (pending: null)

const initialState = {
    data: null,
    pending: null,
    error: null
};

pending appears back in redux devtool:

2 Questions:

1. What pattern should I stick to? (i.e declaring fields as null or undefined)?
2. Is there any performance gain in terms of selecting parts of the store?

Answer 1

null and undefined are two different values for a reason. Accessing a non assigned field on any js values (apart from those two ofc) will return undefined. So if you do:

var foo = {};
foo.bar = undefined;

You will get an object that seems to behave like its bar field is unassigned: except it is and you have foo.hasOwnProperty("bar") === true. It is confusing though. This is why to signify the absence of value null is used and and to signify unassigned value undefined is used. Interestingly this difference in behavior can be found when destructuring data structures:

var { foo = "bar" } = { foo: undefined }

and

var { foo = "bar" } = { foo: null }

will results in foo === "bar" in the former and foo === null in the latter.