UI组件和容器组件

组件的渲染由render函数决定的，当组件的逻辑和渲染都写在一个文件中时，就会显得很臃肿，这是就可以拆分成UI组件和容器组件。

UI组件负责页面的渲染(也称傻瓜组件)，容器组件处理逻辑（也称聪明组件）。

拆分思路：把render方法return的东西全部粘贴到ui组件中，然后一行一行的去读，没有的就从父组件传过去。

src/TodoList.js

import React, { Component } from 'react';

import store from './store' //store存储了公用的数据
import {
    getInputChangeAction,
    getButtonClickAction,
    getDeleteItemAction
} from './store/actionCreator'

import TodoListUI from './TodoListUI';

class TodoList extends Component{
    constructor(props){
        super(props)
        // console.log(store.getState()); 拿到store所有数据
        this.state = store.getState();
        this.hanldeInputChange = this.hanldeInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleButtonClick = this.handleButtonClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)

        store.subscribe(this.handleStoreChange);
    }

    render(){
        const {inputValue, list} = this.state;
        return     (
                <TodoListUI 
                    inputValue = {inputValue}
                    hanldeInputChange = {this.hanldeInputChange}
                    handleButtonClick = {this.handleButtonClick}
                    list = {list}
                    handleItemDelete = {this.handleItemDelete }
                />
            )
    }

    hanldeInputChange(e){
        //action的写法也是固定的，它是一个对象
        const action = getInputChangeAction(e.target.value)
        //把action告诉store后，store会自动把prevStore和action转发给reducer，
        //接着我们就可以在reducer中接收到state和action
        store.dispatch(action)
    }

    handleStoreChange(){
        // console.log("store changed");
        this.setState(store.getState());
    }

    handleButtonClick(){
        //actio是一个对象的样子，有一个type属性
        const action = getButtonClickAction()
        store.dispatch(action)
    }

    handleItemDelete(index){
        const action = getDeleteItemAction(index);
        store.dispatch(action)
    }
}

export default TodoList;

src/TodoListUI.js

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

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

export default TodoListUI;