React-redux实现小案例（todolist）的过程

使用React-redux实现，待办事项todolist案例。

注：以下列出主要页面代码，为说明React-redux实现的过程，所以并没有将案例的完整代码展示！

一、全局安装：rudux、react-redux

npm install redux --save
npm install react-redux

二、主要代码：

1、项目的入口文件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);
 }
 //渲染函数
 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里直接调用，并触发dispacth
let mapDispatchToProps=(dispatch)=>{
 return bindActionCreators(actionCreator,dispatch)
}
//通过connect将UI组件，转换成容器组件
export default connect(mapStateToProps,mapDispatchToProps)(TodoEvent)

//简写,将 mapStateToProps 和 mapDispatchToProps 直接引入 connect
// export default connect(state=>state,(dispatch)=>{
// return bindActionCreators(actionCreator,dispatch)
// })(TodoEvent)

3、actionCreator组件

//actionCreator中对应的方法，只需 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。