react实现了一个带有Redux中央仓库的todolist

本文的例子分享了使用Redux中心仓库实现todolist的具体代码，供大家参考。具体内容如下

Redux简介

Redux是一个用于管理数据和UI状态的JavaScript应用工具。随着JavaScript单页应用程序(SPA)的开发变得越来越复杂，JavaScript需要管理的状态比以往任何时候都多，因此Redux降低了管理难度。(Redux支持React、Angular、jQuery甚至纯JavaScript)

ReduxDevTools插件Redux调试工具谷歌商店下载

减少三个坑：

商店仓库必须是唯一的。绝对不允许有多个店铺，只能有一个店铺空间

只有商店可以更改自己的内容，Reducer不能更改

减速器必须是纯功能的

Redux-thunk，Redux最常用的插件：

在调度一个动作之后，在到达减速器之前，做一些额外的操作需要中间件

在实际工作中，您可以使用中间件来记录日志、创建崩溃报告以及调用异步接口或路由

npminstal-saveredux-thunk

步骤1:仓库在存储文件夹下创建一个新的index.js

//applyMiddleware，compose是用下面两个插件从' redux' /引入redux import thunk从' redux-thunk'/引入redux中间件插件从' redux-thunk '/引入redux中间件插件import reducer。/reducer///reducer//调试面板const compose增强器=窗口中的参考数据。_ _ redux _ devtools _ extension _ compose _ _ _？窗户。_ _ redux _ devtools _ extension _ compose _ _({ }): compose//redux中间件插件这个函数是parallel const enhancer=compose enhancer(apply中间件(thunk))//定义一个仓库。唯一不能有两个仓库的。createStore仓库只接收两个参数：const store=createStore(reductor，enhancer)//创建数据存储仓库导出默认存储//导出仓库以创建用于仓库数据处理的新reducer.js

从导入{add _ item，delete _ item，get _ list} '。/action types//js文件定义type const默认状态={value:' SSS '，list :[]//从后端获取的list数据放在这里} //state:指的是原仓库中的状态。//action:指新转移的动作状态。export default(state=default state，Action)={//console . log(state)//reducer只能接收状态但不能更改状态//if(Action . type==' change input '){//让newstate=JSON . parse(JSON . strict ify(state))//将深度复制状态的值转换为字符串，并将其分配给变量//newstate。价值=行动。vlaue//更改占位符的值等于用户输入的值//返回newState //返回新的状态//}//Add if(action . type===Add _ ITEM){//根据类型值，写业务逻辑让newstate=JSON。解析(JSON。stringfy (state)) newstate。名单。推动(动作。value)//用户输入的新内容将新内容推送到列表控制台. log(action) NewState.value='' //空添加后返回newstate }//delete if(action。type==delete _ item){ let newstate=JSON。解析(JSON。string fy(state))newstate . list . splice(action . index，1) //删除数组中的对应值return newstate }//从后端获取数据，传递给中心仓库进行处理if (action。type==get _ list){ let newstate=JSON。解析(JSON。stringfy(state))newstate . list=action . data return newstate } return state } action types . js集中管理页面缩减器的类型类型

//类型export const add _ item=' additem '//define常量。通常，组件的动作用大写形式封装导出const delete _ item=' delete item '导出const get _ list=' get list action ' action creators . js。

//封装组件的actionimport {ADD_ITEM，DELETE_ITEM，GET_LIST} from ' ./操作类型/定义类型类型的从" axios"//jsimport axios组件添加某物品给商人或自己里的动作类型已经封好所以把价值作为参数用箭头函数（值)=传进来即可//增加数据export const addItem=(值)=({ type : ADd _ ITEM，value}) //删除数据export const delete ITEM=(index)=({ type : delete _ ITEM，index}) //获取数据export const getListAction=(数据)=({ type:GET_LIST，data })export const GetDoList=()={ return(dispatch)={ axios。get '(https://www .简单的模仿。com/mock/5d 63 D7 ca 5774121 E1 a 634378/demo 1/demo 1 ' .然后((RES)={ const data=RES . data。数据；const action=getListAction(数据)调度（操作)//将行为这个值传给仓库}) .捕捉(错误)={ console.log(错误)}) }}TodoList.js组件射流研究…部分

从"反应"导入反应{组件};从""导入到教程/ToDolistui//组件用户界面部分从""导入存储./store/index' //组件中获得商店中的数据//从导入{添加项目，删除项目}./store/action type//定义类型类型的射流研究…为了更方便检查错误写错会报错从导入{添加项目，删除项目，获取列表}./store/action creators//封装的行动/用还原剂写任务列表调用中央仓库类任务列表扩展组件{构造器(道具){ super(道具)//控制台。日志(存储。getState())//getState方法取出仓库的值this.state=store.getState() //将组件状态数据赋值给仓库数据这个。changinputlaue=this。changinputlaue。绑定(此)//给方法做这绑定这个。商店零钱=这个。商店零钱。把这个绑起来。单击Btn=这个。单击Btn。把这个绑起来。deleteitem=this。删除项目。绑定(这家)商店。订阅(这个。商店零钱)//订阅模式改变数据时同步让仓库中的数据改变} render() { return (TodoListUi值={这个。国家。value } changinputlaue={ this。点击BTN={这。点击BTN }列表={这。国家。列表}删除项目={ this。删除项目}/ToDolistui)；} ComponentDidMount(){//axios。get(' https://www。简单的模仿。com/mock/5d 63 D7 ca 5774121 E1 a 634378/demo 1/demo 1 '/.然后((RES)=//{//const data=RES . data。数据；//const action=getListAction(数据)//将取到的数据封入action//store。派遣(行动)//传递给减速器//}) //.捕捉(错误)={ //console.log(错误)//})const action=getTodoList()//使用中间件获取数据store.dispatch(action) //传给仓库} //用户输入的值传给仓库要通过派单()方法传递给商店//行动就是一个对象，这个对象一般有两个属性，第一个是对行动的描述，第二个是要改变的值。 //之前注销的方法，在还原剂里深拷贝完状态里面的数据，无法同步将用户输入赋值给状态changinputlaue(e){ this。setstate({ value : e . target。value//将用户输入的价值绑定给仓库中的价值，监听用户输入})//const action={//键入： '更改输入'，//名字//value:e.target.value //值//}//商店。调度(动作)}//状态和组件的值同步互相改变storeChange(){ this。SetState(存储。GetState())}//增加因为目录数据存在中央仓库里所以要做的是将组件数据传给仓库改变仓库数据后再返回给组件展示单击BtN(){//控制台。日志(这个。国家。value)//const action={//type : ADd _ ITEM，//value:this.state.value //获取到用户价值，用于push//} const action=addItem(这。国家。值)；store.dispatch(action) } //删除删除ITEM(索引){//控制台。log(index)//const action={//type : delete _ ITEM，//index //index传过去用于删除//} const action=删除项目(索引)存储。调度(操作)} }将默认值导出到olistTodoListUi.js组件用户界面部分抽离成子组件

//此文件用于视图和逻辑的分离从“反应”导入做出反应；导入antd/dist/antd.css' //引入蚂蚁设计用户界面库从"附件"//导入{输入，按钮，列表}引入投入组件//无状态组件提高性能将组件改造成函数const TodoListUi=(道具)={ return(div style={ { margin : ' 100px ' } } div Input style={ { width : ' 250px '，右边距： ' 20px ' } } onChange={ props。changinput Laue }值={道具。value }/Button类型=' primary ' onClick={ props。点击BTN }增加/Button/div div style={ {边距： ' 10px，宽度：'300px'}}列表边框/加边框数据源={props.list} //渲染什么数据renderItem={(项，索引)=(列表)。item OnClick={()={ props。删除项目(索引)} } { item }/LiST .Item)} //每项//div/div)；} //改造前组件上边需要从反应引入组件//类TodoListUi扩展组件{//state={ }//render(){//return(//div style={ { margin : ' 100px ' } }//div///Input//style={ { width : ' 250 px '，右边距： ' 20px ' }//onChange={ this。道具。changinputlaue }//value={ this。道具。value }////Button类型=' primary ' onClick={ this props .增加/Button///div//div style={ {边距： ' 10px '，宽度： ' 300px ' }//List//bordered//加边框//数据源={this.props.list} //渲染什么数据//renderItem={(项，索引)=(列表)。item OnClick={()={ this。道具。删除项目(索引)} } { item }/LiST .Item)} //每项//////div///div//)；//}//}导出默认的TodoListUi以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。