P09:Redux基础-用Redux实现ToDoList的删除功能

本文我们用 Redux 来制作一下删除功能，即在点击 ToDoList 中的列表子项时，删除对应的子项。当然如果你觉的对 Redux 的流程已经掌握，可以自己先尝试着作一遍，然后再来进行对比。

绑定子项响应事件

打开 src 目录下的TodoList.js文件，然后找到List组件的renderItem属性，编写代码如下:

<div style={{margin:'10px',width:'300px'}}>
    <List
        bordered
        dataSource={this.state.list}
        renderItem={(item,index)=>(<List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>)}
    />    
</div>

然后编写这个deleteItem()方法，记得它需要接收一个index参数。

deleteItem(index){
    console.log(index)
}

这时候我们到浏览器预览一下，按 F12 打开控制台，可以看到点击按钮时可以看到控制台输出了对应的数组下标。

在方法里编写 Redux 的 Action

写完绑定方法就可以写action了，在编写时，我们要传递 index 过去，代码如下：

deleteItem(index){
    const action = {
        type:'deleteItem',
        index
    }
    store.dispatch(action)
}

reducer 业务逻辑的实现

编写和传递完action就可以到reducer.js来编写相关的业务逻辑了。其实要作的就是删除数组下标的对应值。

if(action.type === 'deleteItem' ){ 
    let newState = JSON.parse(JSON.stringify(state)) 
    newState.list.splice(action.index,1)  //删除数组中对应的值
    return newState
}

这时候就做完了这个 TodoList 组件的基本功能，打开控制台看一下

当然，这个案例还是有很多不足的，我们需要学习更多的知识来完善它，不要走开，下篇文章我们会继续学习。