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

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

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

npm install redux --savenpm 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里直接调用，并触发dispacthlet 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 actionconst 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

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