您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)React-redux怎么實(shí)現(xiàn)todolist的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
使用React-redux實(shí)現(xiàn),待辦事項(xiàng)todolist案例。
注:以下列出主要頁面代碼,為說明React-redux實(shí)現(xiàn)的過程,所以并沒有將案例的完整代碼展示!
一、全局安裝:rudux、react-redux
npm install redux --save npm install react-redux
二、主要代碼:
1、項(xiàng)目的入口文件index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './style/main.less'; import App from './App'; import * as serviceWorker from './serviceWorker'; //*********** 引入容器組件 ************* import {Provider} from 'react-redux'; import store from './store/store'; ReactDOM.render( // ********* 套入Provider組件,傳入store ********* <Provider store={store}> <App /> </Provider> , document.getElementById('root')); serviceWorker.unregister();
2、列表頁面(刪除、完成)
import React from 'react'; import actionCreator from '../../../store/todoStore/actionCreator' ; import {connect} from 'react-redux'; import { bindActionCreators } from 'redux'; class TodoEvent extends React.Component{ //刪除 delete(id){ // alert('delete'+id) this.props.delete(id); } //完成 finish(id){ // alert('finish'+id) this.props.finish(id); } //渲染函數(shù) renderList(){ //容器組件,通過props獲取 let {todolist}=this.props.todoStore; return todolist.map((item)=>{ return <li className='list-group-item' key={item.id}> {item.title} <button onClick={this.delete.bind(this,item.id)} className='btn btn-danger'>刪除</button> {item.isFinish?'已完成': <button onClick={this.finish.bind(this,item.id)} className='btn btn-success'>完成</button>} </li> }) } //渲染頁面 render(){ return( <div> <ul className='list-group'> {this.renderList()} </ul> </div> ) } } let mapStateToProps=(state)=>{ return state; } //bindActionCreators 將綁定的actionCreator中的方法,放到props里直接調(diào)用,并觸發(fā)dispacth let mapDispatchToProps=(dispatch)=>{ return bindActionCreators(actionCreator,dispatch) } //通過connect將UI組件,轉(zhuǎn)換成容器組件 export default connect(mapStateToProps,mapDispatchToProps)(TodoEvent) //簡寫,將 mapStateToProps 和 mapDispatchToProps 直接引入 connect // export default connect(state=>state,(dispatch)=>{ // return bindActionCreators(actionCreator,dispatch) // })(TodoEvent)
3、actionCreator組件
//actionCreator中對應(yīng)的方法,只需 return action const actionCreator={ addlist(title){ let action={ type:'ADD_LIST', title:title } return action }, delete(id){ let action={ type:'DELETE_LIST', id:id } return action }, finish(id){ let action={ type:'FINISH_LIST', id:id } return action } } export default actionCreator
感謝各位的閱讀!關(guān)于“React-redux怎么實(shí)現(xiàn)todolist”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。