<em id="bnjfz"><form id="bnjfz"></form></em>

                  千鋒教育-做有情懷、有良心、有品質的職業教育機構

                  當前位置:首頁  >  關于學院  >  技術干貨  >  正文

                  redux+react-redux實現購物流程

                  來源:千鋒教育
                  作者:qyf
                  關鍵詞: 前端
                  2022-09-15
                  分享

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

                    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{

                    // ...此處繼續省略一萬行代碼

                    }

                    效果圖

                    菜單效果如下:

                  圖片 3

                    商品頁面效果如下:

                  圖片 2

                  圖片 1

                    結語

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

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

                  下一篇

                  相關推薦

                1. redux+react-redux實現購物流程 以上3步涉及到三個組件:菜單組件、商品組件、購物車組件,也就是說我們的數據需要在這三個組件間進行數據交互,因為是使用react開發的項目,于是在項目中引入redux實現多組件間的數據共享,由于react和redux是兩個獨立產品,它們之間并沒有直接的聯系,所以需要使用react-redux把react組件和redux數據時行關聯。
                2. 前端菜鳥面試攻略 首先,單項數據流是發生在 父子組件傳值 的時候,所有的 prop 使得其父子 prop 之間形成了一個 單向下行綁定(也就是說:父級 prop 的更新會 向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態)
                3. 你用過單點登錄嗎?是如何實現的? 父應用提供一個GET方式的登錄接口A(此時的父應用接口固定,攻擊者無法去偽造),用戶通過子應用重定向連接的方式訪問這個接口,如果用戶還沒有登錄,則返回一個登錄頁面,用戶輸入賬號密碼進行登錄,如果用戶已經登錄了,則生成加密的token,并且重定向到子應用提供的驗證token...
                4. 如何進行需求分析 評估不實現的影響;評估需求背后的動機;給用戶帶來驚喜感以及塑造口碑也是需求。
                5. 開發拒絕你的需求怎么辦 詳細說明數據價值,拿出數據進行佐證;拆分多個方案或砍掉部分功能;借助leader的力量進行協調
                6. 你了解哪些加密算法? 循環冗余校驗(Cyclic Redundancy Check, CRC)是一種根據網絡數據包或電腦文件等數據產生簡短固定位數校驗碼的一種散列函數,主要用來檢測或校驗數據傳輸或者保存后可能出現的錯誤。
                7. 国内免费视频青女在线

                  <em id="bnjfz"><form id="bnjfz"></form></em>