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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
JS delegate与live浅析
Dec 21 Javascript
JavaScript网页定位详解
Jan 13 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
vuex的使用步骤
Jan 06 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python 中@property的用法详解
2020/01/15 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
学校四群教育实施方案
2014/06/12 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2014年党小组工作总结
2014/12/20 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
话题作文之诚信
2019/11/28 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Nginx的基本概念和原理
2022/03/21 Servers
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python