- ui組件負責view - 容器組件負責業務邏輯 ui ~~~ 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: "20px", marginLeft: "20px" }}> <Input value={this.props.inputValue} onChange={this.props.handleChange} style={{ width: 300, marginRight: "10px" }} /> <Button type="primary" onClick={this.props.handleClick}>添加</Button> <List style={{ marginTop: "10px", width: "300px" }} bordered dataSource={this.props.list} renderItem={(item,index) => (<List.Item onClick={(index)=>{this.props.handleDelete(index)}}>{item}</List.Item>)} /> </div> ) } } export default TodoListUI; ~~~ - 容器組件 ~~~ import React, { Component } from 'react'; import store from './store/index'; import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators'; import TodoListUI from './TodoListUI'; class App extends Component { constructor(props) { super(props); this.state = store.getState(); /* 訂閱store的改變,只要store改變,handleStoreChange方法就會執行 */ store.subscribe(this.handleStoreChange); } render() { return ( <TodoListUI list = {this.state.list} handleChange = {this.handleChange} handleClick={this.handleClick} handleDelete={this.handleDelete} inputValue = {this.state.inputValue}/> ) } handleChange=(e)=>{ let { value } = e.target; let action = getInputChangeAction(value); store.dispatch(action); } handleStoreChange=()=> { this.setState(store.getState()) } handleClick=()=>{ let action=getAddItemAction(); store.dispatch(action); } handleDelete(index){ let action=getDeleteItemAction(index); store.dispatch(action) } } export default App; ~~~