React-redux实现小案例(todolist)的过程
2019-09-29 10:22
2859 查看
使用React-redux实现,待办事项todolist案例。
注:以下列出主要页面代码,为说明React-redux实现的过程,所以并没有将案例的完整代码展示!
一、全局安装: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
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- React+Redux实现简单的待办事项列表ToDoList
- React+Redux实现简单的待办事项列表ToDoList
- react-redux的使用从action规划到reducer实现及完整案例
- React+Redux实现简单的待办事项列表ToDoList
- react+redux的升级版todoList的实现
- react-redux高阶组件connect方法使用介绍以及实现原理
- react+redux+generation-modation脚手架搭建一个todolist
- 用react-redux实现react组件之间数据共享的方法
- ReactNative基础(四)了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
- react-native,redux,redux-saga组合开发实现
- react-native滑动吸顶效果的实现过程
- 浅谈redux以及react-redux简单实现
- 自己实现React-Redux
- React-Redux-Antd实现知乎日报项目(一)
- 详解 Node + Redux + MongoDB 实现 Todolist
- React入门实例:组件化+react-redux实现网上商城(1)
- 基于React,Redux以及wilddog的聊天室简单实现
- React实现todolist
- 使用 React 自带的 useReducer 和 useContext 来实现 Redux(包含异步action的解决方案)
- 【服务端知识点】(十五天)文件上传实现——30天node+mongo+react+redux+express搭建完美资源后台管理系统+前端(全栈工程师 结合antd)