UI组件和容器组件的拆分

1.首先，以前面的TodoList为例
以下是原来的TodoList中的render函数中的内容，我们可以将组件中关于UI渲染页面的封装到一个文件中

render() {
        return (
            <div>
            <div style={{marginTop:'10px',marginLeft:'10px'}}>
                    <input value={this.state.inputValue}
                        placeholder='输入框'
                        style={{ width: '300px', marginRight: '5px' }}
                        onChange={this.handleInputChange}/>
                <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
            </div>
            <div>
            <List style={{marginTop:'10px', width:'300px'}}
                bordered
                dataSource={this.state.list}
                renderItem={(item ,index)=> (<List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>)}
            />
             </div>
        </div>
        )
    }

2.在src目录下新建一个文件名为TodoListUI.js。将刚刚的render中的内容复制到TodoListUI里面。

3 .这里需要进一步进行完善,逐条进行;

• 首先引入在TodoListUI中引入antd，因为我们用到了input ，button，list的样式

import {Input,Button,List } from 'antd';

• input中的value值和list值需要从父组件TodoList中获取，在父组件中
  
  在子组件中接收
  
• 处理handleInputChange，handleBtnClick，handleItemDelete
  在父组件中：
  
  子组件中使用this.props接收：
  
  TodoList完整代码：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import store from './store/index';
import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators'

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './store/actionTypes'
import { from } from 'rxjs';
import TodoListUI from './TodoListUI';

class TodoList extends Component{
    constructor(props) {
        super(props);
        //将获取到的store数据绑定给自己的this.state
        this.state = store.getState();
        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);
    }
    render() {
        return (<TodoListUI
            //向ui组件传递inputValue值和list
            inputValue={this.state.inputValue}
            list={this.state.list}
            //将handleInputChange，handleBtnClick，handleItemDelete以属性的形式传递给ui组件
            handleInputChange={this.handleInputChange}
            handleBtnClick={this.handleBtnClick}
            handleItemDelete={this.handleItemDelete}

        />)
    }

    // handleInputChange(e) {
    //     const action = {
    //         //type：指需要改变的东西
    //         type:CHANGE_INPUT_VALUE,
    //         value:e.target.value
    //     }
//通过dispatch(action)把数据传递给store
       // store.dispatch(action); 
    
    
    handleInputChange(e) {
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    }
        
    
    handleStoreChange() {
        //当感知到store数据发生变化的时候，调用getStore方法重新取数据并替换原来的数据
        this.setState(store.getState())
    }
    
    // handleBtnClick() {
    //     const action = {
    //         type: ADD_TODO_ITEM,
    //     };
    //     store.dispatch(action);
    // }

    handleBtnClick() {
        const action = getAddItemAction();
        store.dispatch(action);
    }

    // handleItemDelete(index) {
    //     const action = {
    //         type: DELETE_TODO_ITEM,
    //         //把下标的值index传递给reducer
    //         index
    //     }
    //     store.dispatch(action);
    // }
    handleItemDelete(index) {
        const action = getDeleteItemAction(index);
        store.dispatch(action);
    }
}
export default TodoList;

TodoListUI完整代码：

import React, { Component } from 'react';
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='输入框'
                        style={{ width: '300px', marginRight: '5px' }}
                        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;