Redux-用Redux来完成ToDoList(4)

组件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>
                <Input 
                    placeholder={this.props.inputValue} 
                    style={{width:'250px'}}
                    value={this.props.inputValue}
                    onChange={this.props.inputChangeValue}
                />
                <Button type="primary" onClick={this.props.btnClick}>添加游戏</Button>
                <List
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item,index) => (
                        <List.Item onClick={()=>{this.props.deleteItem(index)}}>{item}</List.Item>
                    )}
                />
            </div>
         );
    }
}
 
export default ToDoListUi;

ToDoList.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'
// import {Input,Button,List } from 'antd'
import store from './store/store'
// import {DELETE_ITEM,CHANGE_INPUT,ADD_ITEM} from './actionTypes'
import {changeInputAction,deleteItemAction,addItemAction} from './store/actionCreators'
import ToDoListUi from './ToDoListUi';
// const data=[
//     '跑跑卡丁车',
//     '穿越火线',
//     '真三国无双'
// ]
class ToDoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        this.storeChange = this.storeChange.bind(this);
        store.subscribe(this.storeChange) //订阅Redux的状态
        this.inputChangeValue = this.inputChangeValue.bind(this)
        this.btnClick = this.btnClick.bind(this)
        this.deleteItem = this.deleteItem.bind(this)
    }
    render() { 
        return ( 
            <ToDoListUi
                inputValue={this.state.inputValue}
                list={this.state.List}
                inputChangeValue={this.inputChangeValue}
                btnClick={this.btnClick}
                deleteItem={this.deleteItem}            
            />
         )
    }
    inputChangeValue(e){
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }
    storeChange(){
        this.setState(store.getState)
    }
    btnClick(){
        const action=addItemAction();
        store.dispatch(action)
    }
    deleteItem(index){
        const action=deleteItemAction(index)
        store.dispatch(action)
    }
}
 
export default ToDoList;