react-redux

import React from 'react';
import { connect } from 'react-redux'
import { CHANGE_INPUT, ADD_ITEM } from './store/actionTypes'

const TodoListUI = (props) => {
  const { inputVal, inputChange, clickBtn, list } = props
  return (
    <div>
      <div><input value={inputVal} onChange={inputChange}/>
      <button onClick={clickBtn}>提交</button></div>
      <ul>
        {
          list.map((item, key) => {
            return (<li key={key}>{item.name}</li>)
          })
        }
      </ul>
    </div>
  );
}


// 映射关系的制作
const stateToProps = (state) => {
  return {
    inputVal: state.inputVal,
    list: state.list
  }
}
const dispatchToProps = (dispatch) => {
  return {
    inputChange(e) {
      let action = {
        type: CHANGE_INPUT,
        value: e.target.value
      }
      dispatch(action)
    },
    clickBtn() {
      let action = { type: ADD_ITEM }
      dispatch(action)
      // console.log('clickBtn111')
    }
  }
}
export default connect(stateToProps, dispatchToProps)(TodoListUI);