redux中state更新了 页面没改变

Question

使用了redux和react-redux

reducer的部分代码如下

//给初始状态一个默认值：{money: 0}
export function reducer(state = {money: 0}, action) {
    switch (action.type) {
        case ADD:
        //使用Object.assign，在调试的过程发现state确实改变了，但是页面没有变化，而使用扩展运算符则可以。
            // return Object.assign(state, {money: (state.money + 1)});
            return {...state, ...{money: state.money + 1}};

        case SUBTRACTION:
            return {...state, ...{money: state.money - 1}};
        default:
            return state;
    }
}

请问有大牛知道原因吗

Answer 1

文档

文档上有这么一句话 ：
不能这样使用 Object.assign(state, { visibilityFilter: action.filter })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。
应该把我的代码改成这样
Object.assign({},state, {money: (state.money + 1)})

Answer 2

楼上说的对。
你用 Object.assign(state, ...) 是直接修改了 state 对象，然后返回的还是原来的 state 对象（被修改过的），而 redux 会通过引用来判断前后两次 state 有没有变化。return 原来的 state 的话 redux 会认为你的 state 没有变化。
而扩展符则是创建了一个新的对象，相当于

Object.assign({}, state, ...)

希望对你有帮助

Answer 3

楼上正解。
react比较props和state的引用，你只是修改对象属性值，引用没有变。