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

Bertha 。 2023-10-06 20:54 42阅读 0赞

#### Redux 基础 ####

*  阐述
 *  绑定子项响应事件
 *  在方法里编写Redux的Action
 *  reducer业务逻辑的实现
 *  demo
 *   *  demo01\\src\\TodoList.js
     *  demo01\\src\\store\\reducer.js

## 阐述 ##

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

## 绑定子项响应事件 ##

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

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

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

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

![在这里插入图片描述][0b32cea882f548eab56bf47f1e5920e4.gif_pic_center]

## 在方法里编写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组件的基本功能，打开控制台看一下

![在这里插入图片描述][b098fc97273f43e2b18770404c0546b5.gif_pic_center]  
当然，这个案例还是有很多不足的，我们需要学习更多的知识来完善它，不要走开，下篇文章我们会继续学习。

## demo ##

### demo01\\src\\TodoList.js ###

import React, {
         Component } from 'react';
    import 'antd/dist/antd.css'
    import {
         Input , Button , List } from 'antd'
    import store from './store'
    
    class TodoList extends Component {
        
    
        constructor(props){
        
            super(props)
            // 引入store，使用store.getState()方法,获取state
            this.state=store.getState();
    
            this.changeInputValue= this.changeInputValue.bind(this)
            
            //转变this指向
            this.storeChange = this.storeChange.bind(this)
    
            //关键代码------------start----------
            this.clickBtn = this.clickBtn.bind(this)
            //关键代码------------end----------
            store.subscribe(this.storeChange) //订阅Redux的状态
        }
    
        render() {
         
            return ( 
                <div style={
        {
        margin:'10px'}}>
                    <div>
                        <Input 
                            placeholder={
        this.state.inputValue} 
                            style={
        {
         width:'250px', marginRight:'10px'}}
                            onChange={
        this.changeInputValue}
                        />
                        <Button 
                            type="primary"
                            onClick={
        this.clickBtn}
                        >增加</Button>
                    </div>
                    
                    <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>
    
                </div>
             );
        }
    
        deleteItem(index){
        
            const action = {
        
                type:'deleteItem',
                index
            }
            store.dispatch(action)
        }
    
        changeInputValue(e){
        
            const action ={
        
                type:'change_input_value',
                value:e.target.value
            }
            store.dispatch(action)
        }
    
        storeChange(){
        
            this.setState(store.getState())
        }
    
        clickBtn(){
        
            const action = {
        type:'addItem'}
            store.dispatch(action)
         }
    
    }
    export default TodoList;

### demo01\\src\\store\\reducer.js ###

const defaultState = {
        
        inputValue : 'Write Something',
        list:[
            '早上4点起床，锻炼身体',
            '中午下班游泳一小时'
        ]
    }
    
    /*
    JSON.parse() 方法将数据转换为 JavaScript 对象。
    JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
    */
    
    export default (state = defaultState,action)=>{
        
        // console.log(action.type);
        if(action.type === 'change_input_value'){
        
            let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state
            newState.inputValue = action.value
            return newState
        }
    
        //关键代码------------------start----------
        //state值只能传递，不能使用
        if(action.type === 'addItem'){
         
            //根据type值，编写业务逻辑
            let newState = JSON.parse(JSON.stringify(state)) 
            
            newState.list.push(newState.inputValue)  //push新的内容到列表中去
            newState.inputValue = ''
            return newState
        }
         //关键代码------------------end----------
    
        if(action.type === 'deleteItem' ){
         
            let newState = JSON.parse(JSON.stringify(state)) 
            newState.list.splice(action.index,1)  //删除数组中对应的值
            return newState
        }
    
        return state
    }

[0b32cea882f548eab56bf47f1e5920e4.gif_pic_center]: https://img-blog.csdnimg.cn/0b32cea882f548eab56bf47f1e5920e4.gif#pic_center
[b098fc97273f43e2b18770404c0546b5.gif_pic_center]: https://img-blog.csdnimg.cn/b098fc97273f43e2b18770404c0546b5.gif#pic_center