当前位置:首页 >> 网络编程

React-redux实现小案例(todolist)的过程

使用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"htmlcode">
//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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。