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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JavaScript Split()方法
Dec 18 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
关于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环境――Appserv
2006/12/13 PHP
Smarty安装配置方法
2008/04/10 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Vue指令指令大全
2019/02/09 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
如何更优雅地写python代码
2019/07/02 Python
pandas 空数据处理方法详解
2019/11/02 Python
python re模块常见用法例举
2021/03/01 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
售后客服工作职责
2014/06/16 职场文书
社区文艺活动方案
2014/08/19 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
获奖感言一句话
2015/07/31 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
React 高阶组件HOC用法归纳
2021/06/13 Javascript