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 相关文章推荐
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
Vue分页组件实例代码
Apr 17 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
npm 常用命令详解(小结)
Jan 17 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
关于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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
使用php实现截取指定长度
2013/08/06 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
js 函数的副作用分析
2011/08/23 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
javascript的this关键字详解
2019/05/20 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Python selenium自动化测试模型图解
2020/04/15 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
档案管理员岗位职责
2013/12/01 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
先进事迹演讲稿
2014/09/01 职场文书
六五普法宣传标语
2014/10/06 职场文书
家属联谊会致辞
2015/07/31 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python