在電商項目的開發過程中，會涉及到商品的下單與購買流程，大概流程如下：

　　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有修改)組件會自動刷新。

聲明：本站稿件版權均屬千鋒教育所有，未經許可不得擅自轉載。