react做的react-redux购物车
### 1. 创建项目
create - react - app 项目名(shop)
### 2. 进入项目,下载redux,react-redux
cnpm install redux react - redux --save
### 3. 创建几个文件夹
App ----->App.js App.css
cart------>cart.js
list------->list.js
store---->store.js
reducer-->reducer.js
### 4 . 创建仓库,reducer.js文件,在App.js文件中引入组件,在到index.js文件中引入模块
import {Provider} from "react-redux"; import store from "./store/store"; ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
### 5. 写一个ax . json文件
{
"list": [
{"id":0,"img": "/1.png","title": "联想电脑","parc": 2000,"tp": "/aa.png"},
{"id":1,"img": "/2.png","title": "锤子电脑","parc": 3000,"tp": "/aa.png"},
{"id":2,"img": "/3.png","title": "华硕电脑","parc": 4000,"tp": "/aa.png"},
{"id":3,"img": "/4.png","title": "卧槽电脑","parc": 5000,"tp": "/aa.png"}
]
}
### 6. 在list.js中
import React, {Component} from 'react';//--->引入react模块
import {connect} from 'react-redux';//--->引入react-redux模块
import axios from "axios";//--->引入axios class List extends Component {
constructor(props) {
super(props);
this.state={//--->创建一个初始化状态
list:[]
}
}
componentDidMount() {
var that=this;//--->改变this的指向
axios.get("/ax.json").then(function (ret) {//--->从json文件中读取数据
console.log(ret);
that.setState({list:ret.data.list});//--->使json数据添加到list中保存 }).catch(function (msg) {//--->获取失败,输出数据
console.log(msg)
})
} add(v){//--->添加 v 是每一项的内容
this.props.add1(v);
//alert("qq")
}
render() {
return (
<div>
<ul>
{
this.state.list.map((v,i)=>{
return <li key={i}>
<p>{v.id}</p>
<img src={v.img} alt=""/>
<p>{v.title}</p>
<p>{v.parc}</p>
<img src={v.tp} alt="" onClick={this.add.bind(this,v)}/>
</li>
})
}
</ul>
</div>
);
}
} function mapStateToProps(state) {
return {};
}
function mapDispatchToProps(dispatch) {
return {
add1(v){//--->从上面的添加方法中把 v 每一项的数据传递过来 ,在传递到reducer.js页面对仓库操作
console.log(v);
dispatch({type:"add",data:{t:v}});
}
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(List);
### 6. 在cart.js中
import React, {Component} from 'react';
import {connect} from 'react-redux';
import "./cart.css" class Cart extends Component {
constructor(props) {
super(props);
this.state={
ae:false//--->定义一个状态,用来做三目运算符的判断
}
}
dj(n){//--->点击多选
this.props.dj1(n);
}
jia(n){//--->点击加+按钮
this.props.jia1(n);
}
jian(n){//--->点击减 — 按钮
this.props.jian1(n);
}
djj(){//--->点击 全选多选框
this.props.djj1();
}
xj(){//--->小计
var list=this.props.cart;
var s=0;
list.forEach((v,i)=>{
if(v.show){
s+=v.parc*v.num;
}
})
return s
}
del(){//--->选中删除
this.props.del1();
}
bj(){//--->编辑----》多选框隐藏,显示
this.setState({ae:!this.state.ae}) }
render() {
return (
<div>
<ul>
{
this.props.cart.map((v,i)=>{
return <li key={i}>
<button onClick={this.bj.bind(this)}> 编辑 </button>
<p>{v.id}</p>
<span className={v.show?"ac":""}
onClick={this.dj.bind(this,i)}
style={{display:this.state.ae?"inline-block":"none"}}></span>
<img src={v.img} alt=""/>
<p>{v.title}</p>
<p>{v.parc}</p>
<img src={v.tp} alt=""/>
<p>
<input type="button" value="+"
onClick={this.jia.bind(this,i)}/>
<input type="text" value={v.num}
style={{width:"40px"}}/>
<input type="button" value="-"
onClick={this.jian.bind(this,i)}/>
</p>
</li>
})
} </ul>
<p><span className={this.props.c?"ac":""}
onClick={this.djj.bind(this)}></span>全选
<b>小计:{this.xj()}</b>
<button onClick={this.del.bind(this)}>选中删除</button> </p>
</div>
);
}
}
function mapStateToProps(state) {
return {
cart:state.arr,//--->从仓库中获取list.js中的添加事件
c:state.c//--->从仓库中获取全选的状态
};
}
function mapDispatchToProps(dispatch) {
return {
dj1(n){//--->点击多选框
dispatch({type:"dj",da:{t:n}});
},
jia1(n){//--->加按钮+
dispatch({type:"jia",da:{t:n}});
},
jian1(n){//--->减按钮-
dispatch({type:"jian",da:{t:n}});
},
djj1(){//--->全选
// console.log(n)
dispatch({type:"djj"});
},
del1(){//---->选中删除
dispatch({type:"del"});
}
}
} export default connect(
mapStateToProps,
mapDispatchToProps
)(Cart); ### cart.css 样式
span{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #ccc;
}
.ac{
background: url("/6.png") no-repeat;
background-size: 40px 40px;
}
### 7. 在 reducer.js 中
var s={
arr:[],
c:false//--->定义全选的状态
};
function reducer(state=s,action) {
switch (action.type) {
case "add"://---> 添加
console.log(action.data.t);
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
// var item={
// t:action.data.t,
// show:false
// }//--->这样写也可以
var item = action.data.t;
item.show=false;//---->这样写也可以 var index;
var f=s1.arr.some((v,i)=>{//some方法 , 也可用findIndex方法 if(v.id==item.id){//--->如果已经加入了一件商品,在点相同的商品添加时,
index=i;//--->让他们的下标,索引值相等
}
return v.id==item.id;
})
if(f){//--->f true ===》findIndex -1
s1.arr[index].num++ //--->数量在原有的基础上加1
}else{//--->f false
item.num=1;//--->每次添加一件新的商品,就让他的数量为1
s1.arr.push(item);
} return s1; case "dj"://--->多选框
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
s1.arr[action.da.t].show=!s1.arr[action.da.t].show;//--->取反值
var aa=s1.arr.every((v,i)=>{//--->当选中所有的多选框时,全选的多选框也被选中
return v.show//-->只有当所有的多选框被选中时,条件满足返回---true
})
console.log(aa);
s1.c=aa;//--->让全选的状态为true
return s1; case "jia"://--->加按钮 +
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
s1.arr[action.da.t].num++;
return s1; case "jian"://--->减按钮 -
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
var ff=s1.arr[action.da.t].num--;
if(ff<=1){//--->如果减到小于当前最小数量1时
alert("111");
s1.arr[action.da.t].num=1;//--->让数量为1, 最少为1件
}
return s1; case "djj"://--->全选
// console.log(action.da.t.n)
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
s1.c=!s1.c;//--->取反值
s1.arr.forEach((v,i)=>{
v.show=s1.c;//---> 让多选框的状态等于全选的状态 ,全选为true,多选为true
})
return s1; case "del"://--->选中删除
var s1=JSON.parse(JSON.stringify(state));//--->深度复制
var l = s1.arr.filter((v,i)=>{//--->过滤的方法
return !v.show //--->返回非选中的数据
});
s1.arr=l;//--->让整体的数据等于当前 的非选中数据
s1.c=false; return s1; default:
return state;
}
}
export default reducer;
### 8. 在 store.js 中
import {createStore} from "redux";//--->引入redux模块 import reducer from "../reducer/reducer";//--->引入reducer.js文件 var store=createStore(reducer);//--->创建仓库 export default store;//--->导出 ### 欢迎大家评论,转载,也希望能一起交流,学习!!!
react做的react-redux购物车的更多相关文章
- react做的简单的购物车
###第一步 :首先电脑上已经安装react的脚手架 cnpm install create-react-app -g ###第二步 :创建项目 creact-react-app 项目 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- 前端笔记之React(五)Redux深入浅出
一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...
- 【React】360- 完全理解 redux(从零实现一个 redux)
点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...
- react,react-router,redux+react-redux 构建一个React Demo
创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...
- 使用react Context+useReducer替代redux
首先明确一点,Redux 是一个有用的架构,但不是非用不可.事实上,大多数情况,你可以不用它,只用 React 就够了. 曾经有人说过这样一句话. "如果你不知道是否需要 Redux,那就是 ...
- react、react-router、redux 也许是最佳小实践1
小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...
随机推荐
- bootstrap最简单的导航条
<nav class="navbar navbar-default navbar-static-top"> <div class="navbar-hea ...
- MongoDB 副本集的常用操作及原理
本文是对MongoDB副本集常用操作的一个汇总,同时也穿插着介绍了操作背后的原理及注意点. 结合之前的文章:MongoDB副本集的搭建,大家可以在较短的时间内熟悉MongoDB的搭建和管理. 下面的操 ...
- VS下字符串与数组互相装换
1.分割字符串IdStr为int数组Ids int[] Ids = Array.ConvertAll<string, int>(IdStr.Trim().Split(','), deleg ...
- jQuery相关方法7----各种事件和绑定事件
一.jQuery事件 1.鼠标事件 click与dbclick事件 click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 $ele.click(): ...
- QoS in RoCE (zz)
QoS in RoCE 首页分类标签留言关于订阅2018-03-22 | 分类 Network | 标签 RDMA RoCE ECN PFC Overview TCP/IP协议栈满足不了现代I ...
- windows下安装redis、celery,并启动测试
Windows 环境下基于 Redis 的 Celery 任务调度模块的实现 搭建环境: Windows-x64 10 Celery 3.1.23 Celery-with-redis 3.0 Redi ...
- 前端逼死强迫症之DOM
Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...
- 在本机上用IO流实现复制粘贴功能
/** * 复制文件夹 * @param sourcePath * @param targetPath * @throws IOException */ public void copyFolder( ...
- CodeForces 787 题解
A题,因为数据范围很小,所以只要暴力即可,如果能相遇一定范围不大,如果范围很大还没相遇一定是不会相遇的了.正解应当是用扩展欧几里得计算这个方程的整数解,再想办法看看有没有正整数解才是. B题,只要看懂 ...
- 为centos7配置阿里yum源遇到的问题以及解决方法
[问题背景] 卸载安装的Ambari,之前都是因为卸载不干净.这次重写安装,卸载完之后,发现httpd无法启动,所以想卸载httpd进行重新安装,但是执行命令yum list | grep httpd ...