React 为什么 immutable 对象变化了但是 state 和 视图 都没有更新？

Question

const { Map } = require('immutable');

const initState = Map({
    darken: {
        color: '#ffffff',
    },
})

export default (state = initState, action) => {
    switch (action.type) {
        case 'COLOR_CHANGE': 
            // 每次打印出还是原来那样
            console.log(state.toJS());
            const data = state.get('darken');
            data.color = action.value;
            const newState = state.set('darken', data);
            // 这里看到数据已经是变化了啦
            console.log(JSON.stringify(newState.toJS()));
            return newState;
        default:
            return state;
    }
}

打印出的 state 已经是变化的了，但是视图上并没有更新到新值，而且每次进入 reducer 都是打出还是原来的 state。

本来 initState 里面 没有使用 darken 属性包裹起来的时候，是正常的。使用 darken 包裹多一层就发现 更新不了 state 了

Answer 1

因为虽然state是immutable的，但是darken不是immutable的啊。

你试试：

const temp = data = state.get('darken');
data.color = action.value;
const newState = state.set('darken', data);

console.log(temp === newState.get('darken')); // true