React之UI组件（将render部分的JSX模板拆分出来）和容器组件 （拆分JSX后剩余的逻辑部分）

UI组件

// TodoListUI.js

import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'

class TodoListUI extends Component {
  render () {
    return (
      <div style={{marginTop: '10px', marginLeft: '10px'}}>
        <div>
          <Input
            value={this.props.inputValue}  
            placeholder='todo info' 
            style={{width: '300px', marginRight: '10px'}} 
            onChange={this.props.handleInputChange}
          />
          <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
        </div>
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => (<List.Item onClick={(index) => {this.props.handleItemDelete(index)}} >{item}</List.Item>)}
        />
      </div>
    )
  }
}

export default TodoListUI

容器组件

// TodoList.js

import React, { Component } from 'react'
import store from './store'
import {getInputChangeAction , getAddItemAction, getDeleteItemAction } from './store/actionCreator'
import TodoListUI from './TodoListUI'

class TodoList extends Component {
  constructor (props) {
    super(props)
    this.state = store.getState()
    console.log(this.state )
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
    store.subscribe(this.handleStoreChange)
  }

  componentDidMount () {
    console.log(1111111)
  }

  render () {
    return (
      <TodoListUI 
        inputValue = {this.state.inputValue}
        list = {this.state.list}
        handleInputChange = {this.handleInputChange}
        handleBtnClick = {this.handleBtnClick}
        handleItemDelete = {this.handleItemDelete}
      />
    )
  }

  handleInputChange (e) {
    // const action = {
    //   type: CHANGE_INPUT_VALUE,
    //   value: e.target.value
    // }
    // 将action拆分出去通过函数获取
    const action = getInputChangeAction(e.target.value)
    console.log(e.target.value)
    store.dispatch(action)
  }

  handleStoreChange () {
    console.log('store_change')
    this.setState(store.getState())
  }

  handleBtnClick () {
    // const action = {
    //   type: ADD_TODO_ITEM
    // }
    const action = getAddItemAction()
    store.dispatch(action)
  }

  handleItemDelete (index) {
    // const action = {
    //   type: DELETE_TODO_ITEM,
    //   index
    // }
    const action = getDeleteItemAction(index)
    store.dispatch(action)
    // alert(index)
  }
}

export default TodoList