todoList订阅到react-redux中的state更新了视图没有刷新

Question

点击li删除当前项，mapStateToProps里面订阅到了state修改了，但是视图没有自动刷新。然后我在input里面输入内容的时候，也就是他自己调用了onchange以后视图才会刷新
TodoList.js

import React from 'react'
import { connect } from 'react-redux'

const TodoList = props => {
    const {inputValue,inputValueChange,submitValue,list,delItem} = props;
    return (
        <div>
            <input type="text" value={inputValue} onChange={inputValueChange} /><button onClick={submitValue}>提交</button>
            <ul>
               {list.map((item,index)=>(
                   <li key={item} onClick={_=>{delItem(index)}}>{item}</li>
               ))}
            </ul>
        </div>
    )
}
const mapStateToProps = (state) => {
    console.log('state===========',state);
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}
const mapDispatchToProps = dispatch => {
    return {
        inputValueChange(e) {
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        submitValue(){
            const action = {
                type:'submit_input_value',
            }
            dispatch(action)
        },
        delItem(index){  //删除li
            const action = {
                type:'del_list',
                index
            }            
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

reducer.js

const defaultState = {
    list: [1, 2, 3],
    inputValue: ''
}

export default (state = defaultState, action) => {
    let newState = { ...state }
    switch (action.type) {
        case 'change_input_value':
            newState.inputValue = action.value
            return newState
        case 'submit_input_value':
            newState.list.push(newState.inputValue);
            newState.inputValue = '';
            return newState

        case 'del_list':   //删除li
            console.log(action);
            newState.list.splice(action.index, 1)
            console.log('newState', newState);
            return newState
        default:
            break;
    }
    return state
}

Answer 1

因为state中的list是 array类型, 增减其中的元素, list 本身不变array是 引用类型)
所以list中的内容变了, 但是 list变量本身没变, 或者说它在内存中的地址没变, 所有没有触发页面的刷新.

改成这样试试:

newState.list.splice(action.index, 1)
return Object.assign({}, newState)

---

为什么修改 input框会刷新页面, 因为它改的是另一个 字符串状态 inputValue, 修改之后 inputValue变了, 所以触发页面刷新