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 }
到这里删除功能也完成了,下节内容我们主要讲一下目前代码的优化,这样让你在工作中看起来更专业些。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P22:Redux进阶-React-redux增加List数据
码云笔记 » P22:Redux进阶-React-redux增加List数据