反应-还原实现小案例(todolist)的过程

使用反应还原实现，待办事项任务列表案例。

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

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

新公共管理安装redux - savenpm安装反应还原二、主要代码：

1、项目的入口文件index.js

从“反应”导入做出反应；从“反应世界”导入ReactDOM "进口"。/style/main“少”；从""导入应用程序/App '；从""导入*作为服务人员./ServiCeWorker '；//*********** 引入容器组件************从“反应-还原”导入{提供程序}；从""导入存储“/商店/商店”；ReactDOM.render(//*********套入供应者组件，传入商店* * * * * * * *提供商商店={ store } App//提供商，文档。getelementbyid(' root ')；服务工作者。注销()；2、列表页面（删除、完成)

从“反应”导入做出反应；从""导入操作创建者./././store/to sto store/actionCreator '；从“反应-还原”导入{连接}；从“redux”导入{ BindActionCreates }；类扩展到事件反应。组件{ //删除delete(id){//alert(' delete ' id)this。道具。删除(id)；} //完成finish(id){//alert(' finish ' id)this。道具。完成(id)；} //渲染函数renderList(){ //容器组件，通过小道具获取让{ todolist }=这个。道具。去东方；回到奥利斯特。map((item)={ return Li类名=' list-group-item '键={ item。id } { item。title }按钮OnClick={ this。删除。绑定(这个，项目。id)}类名=' BTNBTN-危险'删除/button {item.isFinish？已完成：按钮OnClick={ this。完成。绑定(这个，项目。id)}类名=' BTNBTN-成功'完成/button} /li }) } //渲染页面render(){ return(div ul class name=' list-group ' { this。renderlist()}/ul/div)} }让mapstatetrops=(state)={ return state；}//绑定动作创建将绑定的actionCreator中的方法，放到小道具里直接调用，并触发dispatchlet mapdispatchttoprops=(调度)={返回bindActionCreators(action creator，调度)}//通过连接将用户界面组件，转换成容器组件导出默认连接(mapStateToProps，mapdispatchttoprops)(ToDoevent)//简写，将mapStateToProps和mapdispatchttoprops直接引入连接//导出默认连接(状态=状态，(调度)={//返回bindActionCreators(action creator，dispatch)/})(TodoEvent)3、动作创建者组件

//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 }导出默认actionCreator以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。