# 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; ~~~ ~~~