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之学会吝啬 精简代码
Apr 25 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
Vue如何实现变量表达式选择器
Feb 18 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
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php实现图片压缩处理
2020/09/09 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
动态创建类实例代码
2009/10/07 Python
深入理解Python装饰器
2016/07/27 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
社区包粽子活动方案
2014/01/21 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
企业文化建设实施方案
2014/03/22 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
经营目标责任书
2015/05/08 职场文书
2016年寒假生活小结
2015/10/10 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB