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

使用React-redux实现,待办事项todolist案例。
注:以下列出主要页面代码,为说明React-redux实现的过程,所以并没有将案例的完整代码展示!

React-redux实现小案例(todolist)的过程_第1张图片

一、全局安装: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 *********
 
  
 
, 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 
  • {item.title} {item.isFinish?'已完成': }
  • }) } //渲染页面 render(){ return(
      {this.renderList()}
    ) } } 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)的过程)