redux重构（二）添加任务——绑定事件&发送action-回车键&变更数据-最大值Math.max.apply（）-深拷贝JSON.parse(JSON.stringify(obj)) & 清空表单

添加任务——绑定事件 & 发送action-回车键-e.keyCode === 13 & 变更数据-最大值Math.max.apply（）-深拷贝JSON.parse(JSON.stringify(obj)) & 清空表单

绑定事件；发送action；变更数据

1、绑定事件

src/views/Header.js

render () {
//定义添加任务
  let { addTask } = this.props
  return (
    <div>
      <header className="header">
        <h1>土豆丝</h1>
        <input ref={this.inputRef} onKeyUp={addTask.bind(this)} className="new-todo" placeholder="你想做什么?" />
      </header>
    </div>
  )
}

创建action

新建src/store/ActionCreator.js

/*
  ActionCreator 本质上是函数，用于创建Action

  Action的本质是一个普通对象
*/

export const addTaskAction = (etitle) => {
  return {
    type: 'todos_add',
    etitle: etitle
  }
}

2、发送action

src/views/Header.js

import * as Actions from '../store/ActionCreator.js'

// 将事件函数提供给组件的props
function mapDispatchToProps (dispatch) {
  return {
      //添加任务
    addTask: function (e) {
      if (e.keyCode === 13) {
        // 按了回车键,添加任务
        // 1、创建添加任务的Action
        let action = Actions.addTaskAction(e.target.value)
        console.log(action)
        // 2、将action分发出去
        dispatch(action)
        // 方法一：通过受控组件处理-添加任务清空表单
        // this.setState({
        //   etitle: ''
        // })
        // 方法二：通过事件对象操作value-添加任务清空表单
        e.target.value = ''
        // 方法三：通过非受控组件处理-添加任务清空表单
        // this.inputRef.current.value = ''
      }
    }
  }
}

// connect参数一用于向组件提供props数据
// connect参数二用于向组件提供事件处理函数
export default connect(null, mapDispatchToProps)(Header)

打印action

在src/store/Reducer.js查看分发内容

/*
  Reducer:复制数据变更操作
*/

export default (state, action) => {
    console.log(action)
    return state
}

验证action分发

src/store/Reducer.js查看索引

任务id

3、变更数据

src/store/Reducer.js

// 添加任务
let newState = JSON.parse(JSON.stringify(state))
// 获取所有任务的id
let ids = newState.todos.map(item => {
  return item.id
})
// 计算所有任务ID的最大值
let maxId = Math.max.apply(null, ids) + 1
let todo = {
  id: maxId,
  etitle: action.etitle,
  done: false,
  isEdit: false
}
// 添加任务
newState.todos.push(todo)
return newState

4、清空表单

• 通过事件对象
• 受控组件
• 非受控组件

// 方法一：通过受控组件处理
// this.setState({
//   etitle: ''
// })
// 方法二：通过事件对象操作value
e.target.value = ''
// 方法三：通过非受控组件处理
// this.inputRef.current.value = ''