# 1.2 实现todoList的增删功能 ## ant-design实现TodoList [例子](https://gitee.com/chengbenchao/react-tutorial/tree/master/01ant-design) 前提要安装antd和redux ~~~ //app.js import React, { Component } from 'react'; import 'antd/dist/antd.css' import { Input, Button, List } from 'antd'; import store from './store/index'; class App extends Component { constructor(props) { super(props); this.state = store.getState(); /* 订阅store的改变,只要store改变,handleStoreChange方法就会执行 */ store.subscribe(this.handleStoreChange); } render() { return ( <div style={{ marginTop: "20px", marginLeft: "20px" }}> <Input value={this.state.inputValue} onChange={this.handleChange} style={{ width: 300, marginRight: "10px" }} /> <Button type="primary" onClick={this.handleClick.bind(this)}>添加</Button> <List style={{ marginTop: "10px", width: "300px" }} bordered dataSource={this.state.list} renderItem={(item,index) => (<List.Item onClick={this.handleDelete.bind(this,index)}>{item}</List.Item>)} /> </div> ) } handleChange=(e)=>{ let { value } = e.target; let action = { type: 'change_input_value', value, } store.dispatch(action); } handleStoreChange=()=> { this.setState(store.getState()) } handleClick=()=>{ let action={ type:'add_todo_item' } store.dispatch(action); } handleDelete(index){ let action={ type:'delete_item', index } store.dispatch(action) } } export default App; ~~~ ~~~ //src>store>reducer.js const defaultState={ inputValue:'hello', list:[1,2,3] }; /* state指store中的数据 */ /* reducer可以接收state,但不能修改state */ export default (state=defaultState,action)=>{ /* ruducer拿到之前的数据,和action中传递过来的数据作比对 */ if(action.type==='change_input_value'){ const newState = {...state}; newState.inputValue = action.value; return newState; } if(action.type==="add_todo_item"){ const newState ={...state}; newState.list.push(newState.inputValue) newState.inputValue="" return newState } if(action.type==="delete_item"){ const newState = {...state}; newState.list.splice(action.index,1); return newState; } return state; } ~~~ ~~~ ~~~ //src>store>index.js import { createStore} from 'redux'; import reducer from './reducer'; const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); export default store; ~~~ ~~~