这篇文章给大家分享的是有关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 *********
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
{item.title}
删除
{item.isFinish?'已完成': 完成}
})
}
//渲染页面
render(){
return(
{this.renderList()}
)
}
}
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感谢各位的阅读！关于“React-redux怎么实现todolist”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
