TodoList.js

import React , {Component} from ‘react’;
import ‘antd/dist/antd.css’;
import {Input,Button,List} from ‘antd’;
import store from ‘./store’;
import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from ‘./store/actionCreators’

const data = [
‘Racing car sprays burning fuel into crowd.’,
‘Japanese princess to wed commoner.’,
‘Australian walks 100km after outback crash.’,
‘Man charged over missing wedding girl.’,
‘Los Angeles battles huge wildfires.’,
];

export default class TodoList extends Component{
constructor(props){
super(props);
this.state= store.getState();//将this.state绑定到store
this.handleStoreChange=this.handleStoreChange.bind(this);
this.handleInputChange=this.handleInputChange.bind(this);
this.handleBtnClick=this.handleBtnClick.bind(this);
store.subscribe(this.handleStoreChange);//监听到store一旦发生变化，便会执行handleStoreChange函数
}
render(){
return (
<div style={{marginTop:‘10px’,marginLeft:‘10px’}}>

<List style={{width:‘300px’,marginTop:‘10px’}}
bordered
dataSource={this.state.list}
renderItem={(item,index) => (<List.Item onClick={this.handleDelete.bind(this,index)}>{item}</List.Item>)}
/>

)
}

handleStoreChange(){
    this.setState(store.getState());//重新渲染组件
}

handleInputChange=(e)=>{
    // const action={
    //     type:'CHANGE_INPUT_VALUE',
    //     value:e.target.value
    // }
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
}

handleBtnClick=()=>{
   const action = getAddItemAction();
    store.dispatch(action);//将action传递给store
    
}

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

}

actionCreators.js

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,ITEM_DELETE} from ‘./actionTypes’

export const getInputChangeAction = (value) =>({
type: CHANGE_INPUT_VALUE,
value
});

export const getAddItemAction = () =>({
type: ADD_TODO_ITEM
});

export const getDeleteItemAction = (index) =>({
type: ITEM_DELETE,
index
})