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 组件的基本功能，打开控制台看一下

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

以上关于P09:Redux基础-用Redux实现ToDoList的删除功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。