React-redux实现小案例(todolist)的过程


Posted in Javascript onSeptember 29, 2019

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

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

React-redux实现小案例(todolist)的过程

一、全局安装: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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
vue中activated的用法
Jan 03 Vue.js
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 #Javascript
在Layui中实现开关按钮的效果实例
Sep 29 #Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 #Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 #Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 #Javascript
react用Redux中央仓库实现一个todolist
Sep 29 #Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 #Javascript
You might like
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
质检部岗位职责
2013/11/11 职场文书
应届毕业生求职信
2014/05/26 职场文书
班级文化建设标语
2014/06/23 职场文书
供电工程专业求职信
2014/08/09 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Pandas搭配lambda组合使用详解
2022/01/22 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers