actionCreators创建好后，在TodoList里引入函数后效果都没有用了
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’}}>
<Input placeholder=‘Basic’ value={this.state.inputValue} style={{width:‘300px’}} onChange={this.handleInputChange}/>
提交
<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
})
