redux版本的todolist

list.jsx部分

import React, { Component } from "react";
import { connect } from "react-redux";
const mapStateToProps = (state) => {
  return {
    list: state.list,
  };
};
class List extends Component {
  handleDelete = (index) => {
    this.props.list.splice(index, 1);
    this.setState({
      // 这一步还是蛮重要的，不然数据点击之后，不会改变，当再次输入数据添加之后，
      // 上一次删除数据才会消失
      list: [...this.props.list],
    });
  };
  render() {
    // console.log(this);
    return (
      <>
        <ul>
          {this.props.list.map((item, index) => (
            <li key={index} onClick={this.handleDelete.bind(this, index)}>
              {item}
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default connect(mapStateToProps)(List);

input.jsx部分

import React, { Component } from "react";
import { connect } from "react-redux";
const mapDispatchToProps = (dispatch) => {
  return {
    add(value) {
      dispatch({
        type: "add",
        task: value,
      });
    },
  };
};
class Input extends Component {
  state = {
    textValue: "",
  };
  handleChange = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };
  handleKey = (e) => {
    if (e.keyCode === 13 && this.state.textValue) {
      this.props.add(this.state.textValue);
      this.setState({
        textValue: "",
      });
    }
  };
  render() {
    // console.log(this);
    return (
      <>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
          onKeyUp={this.handleKey}
        />
      </>
    );
  }
}

export default connect(null, mapDispatchToProps)(Input);

没有什么注释，里面的写法在前几篇里都出现过