redux+react-redux实现购物流程

            return {
                cartlist: state.cartlist.filter(item => item.goods_id != action.goods_id)
            }
        // 修改数量
        case 'CHANGE_QTY':
            return {
                cartlist: state.cartlist.map(item => {
                    if (item.goods_id === action.goods_id) {
                        item.goods_qty = action.goods_qty
                    }
                    return item;
                })
            }
        // 清空商品
        case 'CLEAR_CART':
            return {
                cartlist: []
            }
        default:
            return state;
            
    }
}
export default reducer;
// store/index.js
import {createStore} from 'redux';
import reducer from './reducer'
const store = createStore(reducer);
export default store;

1. 使用react-redux共享数据

import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import store from './store'

​
ReactDOM.render(


,
document.getElementById(‘app’)
)

### **二、react组件接收数据**


1. 菜单组件接收购物车商品数量

const mapStateToProps = (state)=>{
    return {
        cartCount:state.cartlist.length
    }
}
@connect(mapStateToProps)
class Menu extends React.Component {
    //...此处省略部分代码
}

1. 商品页面接收购物车商品列表以及添加到购物车的方法

import {connect} from 'react-redux';

​
@connect((state)=>({
cartlist:state.cart.cartlist
}),dispatch=>({
add2cart(goods){
dispatch({
type:‘ADD_TO_CART’,
goods
})
},
changeQty(goods_id,goods_qty){
dispatch({
type:‘CHANGE_QTY’,
goods_id,
goods_qty
})
}
}))
class Goods extends Component{
// …此处省略一万行代码
}

1. 购物车页面展示商品以及实现删除、清空购物车、修改商品数量等操作

@connect(({cart:{cartlist}})=>({
    cartlist,
    totalPrice:cartlist.reduce((prev,item,idx,arr)=>prev+item.goods_price*item.goods_qty,0)
}),(dispatch)=>{
    return {
        removeCart(goods_id){
            dispatch({
                type:'REMOVE_FROM_CART',
                goods_id
            })
        },
        clearCart(){
            dispatch({
                type:'CLEAR_CART',
            })
        },
        changeQty(goods_id,goods_qty){
            dispatch({
                type:'CHANGE_QTY',
                goods_id,
                goods_qty
            })
        }
    }

​
})
class Cart extends Component{
// …此处继续省略一万行代码
}

### **效果图**


菜单效果如下：


![](https://img-service.csdnimg.cn/img_convert/1344d534928a1ca872d92581cca03514.png)


商品页面效果如下：


​


![](https://img-service.csdnimg.cn/img_convert/8d694b5f1de178d6752fa072f4a104b6.png)


## 写在最后

**在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。**


需要完整版PDF学习资源私我