关于reducer中使用Objeact.assgin({}, state)拷贝state 页面不随数据变化作出响应

来源：6-12 使用React-redux完成TodoList功能

qq_慕标7232504

2022-03-06

描述：在做点击每一项时删除对应项。

// TodoList.js
···
<ul>
   {
     this.props.list.map((item, index) => {
       return (
         <li key={index} onClick={() => {this.props.handleItemClick(index)}}>{item}</li>
       )
     })
   }
 </ul>
 ···
 const mapDispatchToProps = (dispatch) => {
  return {
    ···
    handleItemClick(index) {
      const action = {
        type: 'delete_todo_item',
        index
      };
      dispatch(action);
    }
  };
}

// reducer.js
if (action.type === 'delete_todo_item') {
  // const newState = JSON.parse(JSON.stringify(state))
  const newState = Object.assign({}, state)
  newState.list.splice(action.index, 1);
  console.log(newState)
  return newState;
}