react入门TODO List的reducer代码疑惑

Question

问题描述

TODO List案例,删除list的action数据改变后没有重新渲染UI

问题出现的环境背景及自己尝试过哪些方法

redux-devtools-extension插件,检查action触发后的数据变化,发现一切正常.

相关代码

reducer

const defaultState = {
  inputValue: 'somethings',
  list:[]
}

export default (state=defaultState, action) => {  
  const newState = Object.assign({}, state)
  switch (action.type) {
    case 'change_input_value':
      newState.inputValue = action.value
      return newState
    case 'submit_input_value':
      if (newState.inputValue !== ''){
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
      }
      return newState
    case 'delete':      
      newState.list.splice(action.index, 1)      
      return newState

    default:
      break;
  }

  return newState
}

todoList.js

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


const TodoList = (props) => {
  const {list, inputValue, handleClick, handleDelete, handleInputChange} = props
    return (
      <Fragment>
        <input onChange={handleInputChange} value={inputValue}></input>
        <button onClick={handleClick}>提交</button>
        <ul>
          {
            list.map((item, index) => {
              return <li key={index} onClick={() => {handleDelete(index)}}>{item}</li>
            })
          }
        </ul>
      </Fragment>
    )
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputChange(e) {
      const value = e.target.value
      const action = {
        type: 'change_input_value',
        value
      }
      dispatch(action)
    },
    handleClick(){
      const action = {
        type: 'submit_input_value'
      }
      dispatch(action)
    }, 
    handleDelete(index){      
      const action = {
        type: 'delete',
        index
      }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

你期待的结果是什么？实际看到的错误信息又是什么？

没有错误,只是点击新增加的list item后,数据state变化了,而页面UI没变化.

Answer 1

reducer的编写有问题，返回新state的同时修改了旧的state。

return {
    ...state,
    list: [
        ...state.list,
        action.value
    ]
}

Answer 2

问题处在 defaultValue 里, list 都是同一个值, react 用的是浅比较