React-redux實(shí)現(xiàn)小案例（todolist）的過(guò)程

更新時(shí)間：2021年06月17日 16:26:55 作者：why_Because

這篇文章主要為大家詳細(xì)介紹了React-redux實(shí)現(xiàn)小案例（todolist）的過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用React-redux實(shí)現(xiàn)，待辦事項(xiàng)todolist案例。

注：以下列出主要頁(yè)面代碼，為說(shuō)明React-redux實(shí)現(xiàn)的過(guò)程，所以并沒(méi)有將案例的完整代碼展示！

一、全局安裝：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、列表頁(yè)面（刪除、完成）

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(){
 //容器組件，通過(guò)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>
 }) 
 }
 //渲染頁(yè)面
 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)
}
//通過(guò)connect將UI組件，轉(zhuǎn)換成容器組件
export default connect(mapStateToProps,mapDispatchToProps)(TodoEvent)

//簡(jiǎn)寫,將 mapStateToProps 和 mapDispatchToProps 直接引入 connect
// export default connect(state=>state,(dispatch)=>{
// return bindActionCreators(actionCreator,dispatch)
// })(TodoEvent)

3、actionCreator組件

//actionCreator中對(duì)應(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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: