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

Posted 2022-01-06 wgchen~

Redux 进阶

• 阐述
• 给 button 按钮增加点击事件
• • 编写Reducer的业务逻辑
• 页面UI部分的制作
• • 编写Reducer的业务逻辑

阐述

本文主要学习一下如何用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 willem')
        
    

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

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

编写Reducer的业务逻辑

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

const defalutState = 
    inputValue : 'Default value willem',
    list :[]


const arrowFun = (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


export default arrowFun;

页面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 的列表项。

给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

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

源码：https://gitee.com/yyzsn_willem/react/branches