千鋒教育-做有情懷、有良心、有品質的職業教育機構
在電商項目的開發過程中,會涉及到商品的下單與購買流程,大概流程如下:
1. 菜單購物車實時中顯示商品數量
2. 在商品頁面添加到購物車
3. 進入購物車頁面展示添加的商品
以上3步涉及到三個組件:菜單組件、商品組件、購物車組件,也就是說我們的數據需要在這三個組件間進行數據交互,因為是使用react開發的項目,于是在項目中引入redux實現多組件間的數據共享,由于react和redux是兩個獨立產品,它們之間并沒有直接的聯系,所以需要使用react-redux把react組件和redux數據時行關聯。
redux不用多說,是一個狀態管理工具,能夠幫助我們實現數據的管理有更新。 react-redux利用Context與高階組件實現了數據共享與組件自動刷新的問題。
萬事具備,只差代碼
一、共享redux數據
1. 先使用redux創建數據
// reducer/index.js
const initState = {
cartlist:[]
}
function reducer(state=initState,action){
switch(action.type){
// 添加商品
case 'ADD_TO_CART':
// 返回一個新的State,這個state會自動覆蓋store中的舊數據
return {
cartlist: [action.goods, ...state.cartlist]
}
// 刪除商品
case 'REMOVE_FROM_CART':
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(
<Provider store={store}>
<App/>
</Provider>,
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{
// ...此處繼續省略一萬行代碼
}
效果圖
菜單效果如下:
商品頁面效果如下:
結語
redux + react-redux實現了一個商品添加到購物車的完整流程,細心的小伙伴發現,redux與react-redux各自實現了不同的功能:
· redux定義了初始數據state,并通過reducer提供了修改state的方法
· react-redux利用Context共享redux中的數據(),并使用高階組件(connect())把數據作為props傳入組件
其中的原理其實很簡單,組件使用Context實現了跨組件間的數據共享,不管組件層級有多深都能直接獲取的redux上的數據,而connect()高階組件則通過props往React組件中傳遞redux數據,使用props的好處就是當redux數據有修改時(即props有修改)組件會自動刷新。
上一篇
前端菜鳥面試攻略相關推薦