[Immutable.js] Updating nested values with ImmutableJS-优快云博客

本文介绍如何利用ImmutableJS中的setIn和updateIn方法高效地更新嵌套数据结构。通过示例展示了如何添加新消息及更新指定路径的消息。

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());