P22:Redux进阶-React-redux增加List数据

本文主要学习一下如何用React-Redux增加列表数据,如果你上一篇文章的流程练习熟练了,那本文就不是很难了。我们接下来要实现的效果,就是点击提交按钮时,可以在列表中进行增加。

给<button>按钮增加点击事件

直接在/src/TodoList.js里的Button增加一个onClick事件,代码如下:

<button onClick={this.props.clickButton}>提交</button>

注意这里依然使用的props,也就是说还需要把方法写在dispatchToProps里。我们这里先写一个测试,看看是否绑定上了。

const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
            let action = {
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)
        },
        clickButton(){
            console.log('hello mybj')
        }
    }
}

写完clickButton方法后,在浏览器中预览,打开浏览器的控制台看一下结果,应该在点击时,可以看到显示hello mybj。 这步完成,就是用dispatch派发action了。

clickButton(){
    let action = { type:'add_item' }
    dispatch(action)
}

编写Reducer的业务逻辑

派发完成后,到Reducer编写业务逻辑,这一步和一起的操作基本一样。

const defalutState = {
    inputValue : 'jspang',
    list :[]
}

export default (state = defalutState,action) =>{
    if(action.type === 'change_input'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    //----关键代码------start---------
    if(action.type === 'add_item'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    //----关键代码------end---------
    return state
}

页面UI部分的制作

这步完成后,我们到TodoList.js中进行JSX部分的编写,编写前需要先把stateToProps的映射关系做好。

const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue,
        list:state.list
    }
}

有了映射关系,就可以再界面中用属性的方式,进行显示,代码如下:

<ul>
    {
        this.props.list.map((item,index)=>{
            return (<li key={index}>{item}</li>)
        })
    }
</ul>

这样就实现了增加TodoList的列表项,这里给出TodoList.js的代码,方便学习使用.

import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'

class TodoList extends Component {
    constructor(props){
        super(props)
        this.state = store.getState()
    }
    render() { 
        return (
            <div>
                <div>
                    <input value={this.props.inputValue} onChange={this.props.inputChange} />
                    <button onClick={this.props.clickButton}>提交</button>
                </div>
                <ul>
                    {
                        this.props.list.map((item,index)=>{
                            return (<li key={index}>{item}</li>)
                        })
                    }
                </ul>
            </div>
        );
    }
}
const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue,
        list:state.list
    }
}

const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
            let action = {
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)
        },
        clickButton(){
            let action = {
                type:'add_item'
            }
            dispatch(action)
        }
    }
}
export default connect(stateToProps,dispatchToProps)(TodoList);

给li增加删除点击事件

<ul>
    {
        this.props.list.map((item,index)=>{
            return (
                <li
                    key={index}
                    onClick={this.props.deleteItem}
                    >{item}</li>
            )
        })
    }
</ul>

注意这里依然使用的props,也就是说还需要把方法写在dispatchToProps里。需注意的是这时我们action对象中不仅传入type还需要一个index值,代码如下:

deleteItem(index){
    let action = {
        type: 'delete_item',
        index
    }
    dispatch(action)
}

编写Reducer的业务逻辑

派发完成后,到Reducer编写业务逻辑,这一步和新增的操作基本一样。

if(action.type === 'delete_item'){
    let newState = JSON.parse(JSON.stringify(state))
    newState.list.splice(action.index,1)
    return newState
}

到这里删除功能也完成了,下节内容我们主要讲一下目前代码的优化,这样让你在工作中看起来更专业些。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P22:Redux进阶-React-redux增加List数据

发表评论

提供最优质的资源集合

立即查看 了解详情