本文实例为大家分享了用反应回来的中央仓库实现一个基于网络的具体代码,供大家参考,具体内容如下
<强>回来的简单介绍
回来的是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的国家(状态),回来的就是降低管理难度的。(回来的支持反应,角,jQuery甚至纯JavaScript)
Redux Dev 工具插件,回来的调试工具,谷歌商店下载
<强>回来的三个坑:
存储仓库必须是唯一的,多个商店是坚决不允许,只能有一个存储空间
只有商店能改变自己的内容,减速器不能改变
减速器必须是纯函数
<强> Redux-thunk这个回来的最常用的插件:
在分派一个行动之后,到达减速机之前,进行一些额外的操作,就需要用到中间件(中间件)
在实际工作中你可以使用中间件来进行日志记录,创建崩溃报告,调用异步接口或者路由
,
npm install ——节省redux-thunk
<强>第一步,仓库,在商店文件夹下新建index.js
//applyMiddleware,组成是为了使用下面两个插件
进口{createStore applyMiddleware,组成}'回来的'//引入回来的
从“redux-thunk”//进口铛引入回来的中间件插件
从“进口减速器。/减速器'//引用减速器中的数据//浏览器安装的仓库插件调试面板
const composeEnhancers=窗口。__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ & # 63;
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):组成//回家的中间件插件此函数为了兼容两个插件并行
const增强剂=composeEnhancers (applyMiddleware(铛))//定义一个仓库唯一的不能有两个仓库createStore仓库只接收两个参数
常量存储=createStore(减速机、增强器)//创建数据存储仓库
出口默认存储//将仓库导出
新建reducer.js 做仓库数据处理
进口{ADD_ITEM、DELETE_ITEM GET_LIST}”。/actionTypes '//定义类型类型的js文件
const defaultState={
价值:“sss”,
列表:[]//后端获取的列表数据放在这里
}//状态:指的是原始仓库里的状态。//行动:指的是行动新传递的状态。
出口违约(国家=defaultState行动)=祝辞{//console.log(状态)//减速器里只能接收状态不能改变状态//如果行动。类型===癱hangeInput”) {//让newState=JSON.parse (JSON.stringify(状态))//深拷贝状态的值转成字符串赋值给一个变量//newState。值=https://www.yisu.com/zixun/action.vlaue/改变占位符的值等于用户输入的值//返回newState//将新状态返回出去//}//增加
如果行动。类型===ADD_ITEM){//根据类型值,编写业务逻辑
让newState=JSON.parse (JSON.stringify(状态)
newState.list.push (action.value)//用户输入的新内容新推的内容到列表中去
console.log(行动)
newState。值="//增加后清空
返回newState
}//删除
如果行动。类型===DELETE_ITEM) {
让newState=JSON.parse (JSON.stringify(状态)
newState.list.splice (action.index, 1)//删除数组中对应的值
返回newState
}//后端获取数据传递给中央仓库做处理
如果行动。类型===GET_LIST) {
让newState=JSON.parse (JSON.stringify(状态)
newState。=action.data列表
返回newState
}
返回状态
}
actionTypes.js ,集中管理页面减速器的类型类型
//集中管理页面减速器的类型类型
出口const ADD_ITEM=" addItem "//定义常量一般用大写
出口const DELETE_ITEM=" deleteItem "
出口const GET_LIST=" getListAction "
之前
actionCreators.js ,封装组件的行动
//封装组件的行动
进口{ADD_ITEM、DELETE_ITEM GET_LIST}”。/actionTypes '//定义类型类型的js
从“axios”进口axios//组件addItem里的动作类型已经封好所以把价值作为参数用箭头函数(价值)=祝辞传进来即可//增加数据
出口const addItem=(值)=祝辞({
类型:ADD_ITEM,
价值
})//删除数据
出口const deleteItem=(索引)=祝辞({
类型:DELETE_ITEM,
指数
})//获取数据
出口const getListAction=(数据)=祝辞({
类型:GET_LIST,
数据
})
出口const getTodoList=()=祝辞{
返回(调度)=祝辞{
axios.get (“https://www.easy-mock.com/mock/5d63d7ca5774121e1a634378/demo1/demo1”)
不要犹豫((res)=比;
{
常量数据=https://www.yisu.com/zixun/res.data.data;
const action=getListAction(数据)
调度(行动)//将行动这个值传给仓库
})
.catch((错误)=> {
console.log(错误)
})
}
}
