redux dva 的理解和應用

1  不要想的太複雜  直接上代碼

class TodoList extends Component {

  constructor(props) {
    super(props)
    this.state = {
      value: ''
    }
  }

  componentDidMount() {
  }

  removeItem(index) {
    this.props.dispatch({
      type: 'todo/delete',
      payload: index
    })
  }

  toggleItem(index) {
    this.props.dispatch({
      type: 'todo/toggle',
      payload: index
    })
  }

  modify(value, index) {
    this.props.dispatch({
      type: 'todo/modify',
      payload: {value, index}
    })
  }

  addTodo(value) {
    this.props.dispatch({
      type: 'todo/addTodo',
      payload: value
    })
    this.setState({value: ''})
  }

  render() {
    const { list } = this.props
    let count = 0
    list.map(item => count = !item.finished ? count + 1 : count)
    return (
      <div className={styles.container}>
        <span>
          <h1>我的待辦清單</h1>
          <h3>你有{count}項待辦事項未處理</h3>
        </span>
        <input
          style={{borderWidth: 1, borderColor: 'red'}}
          placeholder="請輸入代辦事項"
          value={this.state.value}
          onChange={(e) => this.setState({value: e.target.value})}
          onKeyDown={(e) => {
            if (e.keyCode === 13){
              let title = e.target.value
              title.length > 0 ? this.addTodo(title) : null
            }
          }}
        />
        <span>
          <ul>
            {
              list.map((item, index) => {
                return (
                  <li
                    key={index}
                  >
                    <input
                      type="checkbox"
                      checked={item.finished}
                      onChange={() => this.toggleItem(index)}
                    />
                    <input
                      style={{width: 200,height: 20}}
                      defaultValue={item.title}
                      autoFocus={false}
                      onKeyDown={(e) => {
                        if (e.keyCode === 13){
                          let title = e.target.value
                          this.modify(title, index)
                        }
                      }}
                    />
                    <button onClick={() => this.removeItem(index)}>刪除</button>
                  </li>
                )
              })
            }
          </ul>
        </span>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    list: state.todo.list
  }
}

const _todoList = connect(mapStateToProps)(TodoList)

export default _todoList