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

Redux 基础

• 阐述
• 绑定子项响应事件
• 在方法里编写Redux的Action
• reducer业务逻辑的实现
• demo

• demo01\src\TodoList.js
• demo01\src\store\reducer.js

阐述

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

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

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
}