Immutable.js Push into array in nested object

Question

Assume there is an object:

const object = {
  'foo': {
    'bar': [1, 2, 3]
  }
}

I need to push 4 to object.foo.bar array.

Right now I'm doing it like this:

const initialState = Immutable.fromJS(object)
const newState = initialState.setIn(
  ['foo', 'bar', object.foo.bar.length],
  4
)
console.log(newState.toJS())

But I don't really like it, since I need to use object.foo.bar.length in the path. In my real example object is nested much deeper, and getting array's length looks very ugly. Is there another, more convenient way?

Answer 1

This should work

initialState.updateIn(['foo', 'bar'], arr => arr.push(4))

References:

• https://immutable-js.github.io/immutable-js/docs/#/updateIn

Answer 2

I'm using seamless-immutable, when I'm adding a new item to array of nested object, I got this error:

The push method cannot be invoked on an Immutable data structure.

My array still has push method, but it doesn't work. The solution is use concat instead, more details on #43:

initialState.updateIn(['foo', 'bar'], arr => arr.concat([4]));

Hope this help!