update an array nested in an object in an immutable way

Question

So I have this reducer that I would like to update

import { fromJS } from 'immutable';
const initialState = fromJS({
  searchParams: {
    limit: 100,
    page: 1,
    order_by: 'name',
    filters: {
      and_keywords : []
    }
  },
})

when the action is triggered I would like to push an object into the array of and_keywords. What I have done so far is this

case ADD_KEYWORDS:
return state
    .setIn(['searchParams', 'filters', 'and_keywords'], '123');

I also tried

case ADD_KEYWORDS:
return state
    .updateIn(['searchParams', 'filters', 'and_keywords'], arr => arr.push('123'))

basing from the documents in https://facebook.github.io, but I can't seem to make it work. No changes have been made after executing this command

Immutable objects don't modify in place, you have to reassign the thing you're modifying. So just add state = to the start of your lines and it should work. — IronWaffleMan
– IronWaffleMan, Commented Sep 27, 2017 at 3:43
I already have function homePageReducer(state = initialState, action) { just did not include it as I only posted a snippet of my code — deathknight256
– deathknight256, Commented Sep 27, 2017 at 3:56

Rico Chen · Accepted Answer · 2017-09-29 15:49:37Z

1

Your updateIn version should work:

const Immutable = require('immutable')

const initialState = Immutable.fromJS({
  searchParams: {
    limit: 100,
    page: 1,
    order_by: 'name',
    filters: {
      and_keywords : []
    }
  },
})

const newState = initialState.updateIn(['searchParams', 'filters', 'and_keywords'], arr => arr.push('123'))

console.log(newState)

Your setIn version code should work as well with a small modification:

const Immutable = require('immutable')


const initialState = Immutable.fromJS({
  searchParams: {
    limit: 100,
    page: 1,
    order_by: 'name',
    filters: {
      and_keywords : []
    }
  },
})

const newState = initialState.setIn(['searchParams', 'filters', 'and_keywords'], initialState.getIn(['searchParams', 'filters', 'and_keywords']).push('123'))

console.log(newState)

Both should output:

Map { "searchParams": Map { "limit": 100, "page": 1, "order_by": "name", "filters": Map { "and_keywords": List [ "123" ] } } }

answered Sep 29, 2017 at 15:49

Rico Chen

2,29816 silver badges19 bronze badges

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

1 Comment

deathknight256 Over a year ago

Yeah. It was another bug on my end that caused the issue. Accepted the answer still for reference for others to use. Thanks!

Collectives™ on Stack Overflow

update an array nested in an object in an immutable way

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related