（二十三）UI组件与容器组件的拆分

UI组件-页面渲染
容器组件-页面逻辑

拆分这样的todolist

image.png

把页面渲染从 src\TodoList.js 中拆分出去，新建 src\TodoListUI.js 这个文件

image.png

//src\TodoListUI.js
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="todo info" style={{ width: '300px', marginRight: '10px' }} onChange={this.props.handleInputChange} />
                    <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
                    <List style={{ marginTop: '10px', width: '300px' }}
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item, index) => (
                            <List.Item onClick={() => { this.props.handleItemDelete(index) }}> 
                                {item}
                            </List.Item>
                        )}
                    />
                </div>

            </div>
        )
    }
}
export default TodoListUI

//src\TodoList.js
import React, { Component } from 'react';
import 'antd/dist/antd.css';
import TodoListUI from './TodoListUI';
import store from './store/index.js'
import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators'
// import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './store/actionTypes'// import 写到了  actionCreators.js 中
class TodoList extends Component {
    constructor(props) {
        super(props)
        // 这时候组件的数据来源于 store
        this.state = store.getState()
        console.log(this.state);  //{inputValue: "", list: Array(0)}
        console.log(store.getState());  //{inputValue: "", list: Array(0)}
        this.handleInputChange = this.handleInputChange.bind(this)
        // 组件去订阅store,只要store发生改变，this.handleStoreChange就会执行一次
        this.handleStoreChange = this.handleStoreChange.bind(this)
        // 监听store数据的变化
        store.subscribe(this.handleStoreChange)

        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
    }
    render() {
        return (
            <TodoListUI
                inputValue={this.state.inputValue}
                handleInputChange={this.handleInputChange}
                handleBtnClick={this.handleBtnClick}
                list={this.state.list}
                handleItemDelete={this.handleItemDelete}
            />
        )
    }
    handleInputChange(e) {
        // 1.创建action方法
        // const action = {
        //     type: CHANGE_INPUT_VALUE,
        //     value: e.target.value
        // }
        //2.调用store 的 dispatch把 action 派发给store
        //Store 接收到 action 会自动帮我们把 之前的数据（previousState）和 action  传递给 Reducer
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
        console.log(e.target.value);
    }
    handleStoreChange() {
        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)
        console.log(index);
    }
}
export default TodoList

E:\20201017-React\redux-todolist\ui-container-component\todolist

需要完整代码，加我微信: hello_helloxi