react做的react-redux购物车

Posted 2020-11-23 zhangmr

### 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} />
                                 <p>{v.title}</p>
                                 <p>{v.parc}</p>
                                 <img src={v.tp}  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} />
                                 <p>{v.title}</p>
                                 <p>{v.parc}</p>
                                 <img src={v.tp} />
                                 <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;//--->导出  

### 欢迎大家评论，转载，也希望能一起交流，学习！！！