import React from "react";

import { connect } from "react-redux";
const TodoList = (props) => {
  let { inputValue, inputChange, addItem, list, del } = props;

  return (
    <div>
      <input value={inputValue} onChange={inputChange} />
      <button onClick={addItem}>提交</button>
      <ul>
        {list.map((item, index) => {
          return (
            <li onClick={() => del(index)} key={index}>
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list,
    // name:state.nameValue
  };
};
const dispatchTpProps = (dispatch) => {
  return {
    inputChange(e) {
      let action = {
        type: "inputChange",
        value: e.target.value,
      };
      dispatch(action);
    },
    addItem() {
      let action = {
        type: "addItem",
      };
      dispatch(action);
    },
    del(index) {
      let action = {
        type: "del",
        index,
      };
      dispatch(action);
    },
  };
};

export default connect(mapStateToProps, dispatchTpProps)(TodoList);