Immutable JS - merge creates a list of map objects from array

Question

I am using redux and immutablejs, and I am trying to create a reducer function.

I have come across some behaviour I did not expect

const a = new Immutable.Map({
  numbers: [{id: 1},{id: 2}]
});

const b = a.merge(
  {
    numbers: [{id: 4},{id: 5}]
  }
);

Here are the values of a and b

a.get("numbers");
[Object, Object]
b.get("numbers");
List {size: 2, _origin: 0, _capacity: 2, _level: 5, _root: null…}
b.get("numbers").get(0);
Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}

I did not expect numbers to be an immutable List of Map objects.

In my application, using redux, I set the initial state to:

const initialState = new Immutable.Map({
  error: null,
  isBusy: false,
  films: []
});

I the reducer, when I fetch films I try to merge them as follows:

return state.merge({
        isBusy: false,
        films: action.payload,
        error: null
      });

This causes issues in the react component, as films are initially an array of objects, and then they become an Immutable List of Maps.

Should I create a different initial state, or should I be using a different type of merge? Or something else?

Thanks

erdysson · Accepted Answer · 2016-09-03 10:20:00Z

2

I think what you are trying to do is not merge of whole map object, at least should not be in the case you say, it should be update + ( concat or merge ):

const a = new Immutable.Map({
  numbers: [{id: 1},{id: 2}]
});

const b = a.update("numbers", numbers =>
  numbers.concat([{id: 4},{id: 5}])
  // or
  numbers.merge([{id: 4},{id: 5}])
);

by doing merge in your code, you are overriding the existing ones due to the nature of "merge" because the keys are the same in the merge; "numbers".

answered Sep 3, 2016 at 10:20

erdysson

1,49013 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daryn Over a year ago

I do want numbers to be overridden, that is not the issue. The problem is, films are initially an array of objects, and then they become an Immutable List of Maps after the merge. How can I keep them as just an array of objects?

erdysson Over a year ago

this is why you are using Map at the top. Map does not convert the inner objects to maps. If you want this, use I.fromJS() which converts objects deeply to Maps, and arrays to Lists

Daryn Over a year ago

Thanks, that would help. Is it possible to merge them while keeping plain arrays and objects?

Collectives™ on Stack Overflow

Immutable JS - merge creates a list of map objects from array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related