redux中遇到store库的一个小坑

今天在写代码的时候用到redux状态管理工具，碰到了一个问题，花了好长时间才解决掉，现在分享一下，以后如果有遇到的就不用浪费事件了。
首先，多话不说，写一个简单的案例。
建立一个store文件，在文件下建立reducer.jsx文件

const initialState = {
    todus:[
        {
            "id":1,
            text:"aa"
        }
    ]
}

export default (state = initialState, { type, text }) => {
    switch (type) {

    case "ADD":
        let newState = {...state}
        newState.todus.push({
            id:Date.now(),
            text
        })
        console.log(newState)
        return newState;
    default:
        return state
    }
}

首页就是一个简单的文本框和设置了一个回车事件.

add=(e)=>{
        if(e.keyCode===13){
            if(e.target.value.trim()==="") return
            this.props.addAction(e.target.value);
            e.target.value="";
        }
    }
    render() {
        return (
            <div>
                <input type="text" onKeyUp={this.add}/>
                <ul>
                    {
                        this.props.todus.map((item)=>{
                            return (
                            <li key={item.id}>
                                {item.text}
                            </li>)
                        })
                    }    
                </ul>                
            </div>
        )
    }

这样网页首页的效果就是很简单的一个input框,和库里边的一条数据.

我们在文本框写好数据按了回车键之后,我遇到的坑就出现了,

按下之后会发现页面没有丝毫的反应,通过打印库里的值却发现库里边有值,但是却没有渲染.效果如下

这是什么原因呢?我找了很久,最后发现这是一个关于深拷贝和浅拷贝的问题.因为ES6中,扩展运算符是浅拷贝,他只能拷贝第一层对象,第二次是浅拷贝,所有他没有改变,也就造成了没有渲染出来的原因.解决的办法很简单,只需要把他转为深拷贝就可以了.以下咱们用一下ES6中的字符串转对象,然后再给他转回来就可以.代码如下:

export default (state = initialState, { type, text }) => {
    switch (type) {

    case "ADD":
        // let newState = {...state}
        var newState=JSON.parse(JSON.stringify(state)); 
        newState.todus.push({
            id:Date.now(),
            text
        })
        console.log(newState)
        return newState;
    default:
        return state
    }
}

最后,我们的问题完美解决.

这就是我遇到的一点小坑,希望能对阅读的你有一点小小的帮助.