redux中数据更改页面未实时更新

问题：在使用redux/react-redux中，reducer的数据明明已经更改了，但是却不能触发组件的render函数，页面也没有同步更新

reducer代码如下：

import { ADDTODO, DELETETODO, UPDATETODO, CLEARTODO, CHECKAllTODO } from './constant'
const initState = [
    { id: '001', task: '唱歌', done: false },
    { id: '002', task: '跳舞', done: false },
    { id: '003', task: '打球', done: false },
];
export default function todoReducer(preState = initState, action) {
    const { type, data } = action;
    switch (type) {
        case ADDTODO:
            preState.push(data) return preState;
        case DELETETODO:
            return preState.filter(v => v.id !== data)
        case UPDATETODO:
            return preState.map(v => {
                if (v.id === data) v.done = !v.done;
                return v
            })
        case CLEARTODO:
            return preState.filter(v => !v.done);
        case CHECKAllTODO:
            return preState.map(v => ({ ...v, done: data }));
        default:
            return preState;
    }
}

原因分析：

reducer是一个纯函数，不能修改参数preState，并且当你返回preState时，redux/react-redux并不知道数据已经更改（preState是对象引用，始终指向一个地址），而这里对preState进行了push操作，并把操作后的preState返回。

解决办法：

reducer代码如下：

import { ADDTODO, DELETETODO, UPDATETODO, CLEARTODO, CHECKAllTODO } from './constant'
const initState = [
    { id: '001', task: '唱歌', done: false },
    { id: '002', task: '跳舞', done: false },
    { id: '003', task: '打球', done: false },
];
export default function todoReducer(preState = initState, action) {
    const { type, data } = action;
    switch (type) {
        case ADDTODO:
            return [...preState, data];
        case DELETETODO:
            return preState.filter(v => v.id !== data)
        case UPDATETODO:
            return preState.map(v => {
                if (v.id === data) v.done = !v.done;
                return v
            })
        case CLEARTODO:
            return preState.filter(v => !v.done);
        case CHECKAllTODO:
            return preState.map(v => ({ ...v, done: data }));
        default:
            return preState;
    }
}