[Immutable.js] Updating nested values with ImmutableJS

Posted 2020-08-17 Answer1215

The key to being productive with Immutable JS is understanding how to update values that are nested. Using setIn you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use updateIn instead. updateIn accepts the same path lookups as setIn, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.

 

const {Map, List, fromJS} = Immutable;

const state = fromJS({
    home: {
        loading: false,
        messages: [
            {
                type: ‘info‘,
                message: ‘Welcome to our website‘
            }
        ]
    }
});

// Add a new message with updateIn
const updated = state.updateIn([‘home‘, ‘messages‘], msgs => {
    return msgs.push(Map({type: ‘info‘, message: ‘Hi there!‘}));
});
console.log(updated.getIn([‘home‘, ‘messages‘]).toJS());


// Update a message in a known path
const updated2 = state.setIn([‘home‘, ‘messages‘, 0, ‘message‘], ‘new message!‘);
console.log(updated2.getIn([‘home‘, ‘messages‘]).toJS());