使用React-redux实现小案例（todolist）的过程

最新推荐文章于 2022-04-07 21:15:12 发布

原创最新推荐文章于 2022-04-07 21:15:12 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React #React-redux

框架专栏收录该内容

20 篇文章

订阅专栏

本文介绍使用React-redux实现待办事项列表（todolist）的案例，涵盖了全局安装、主要代码实现，包括项目的入口文件index.js、列表页面的删除与完成功能、以及actionCreator组件的详细代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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