iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

初學者對於做購物車系統的分析系列 第 27

Day 27-製作購物車之Redux 2

主要呈現實作成果

以下內容有參考教學影片,底下有附網址。
(內容包括我的不專業解說分析及在實作過程中遇到的困難與解決)

go go~


Cart的部分結束,今天要來說Product的部分

###Reducers
在reducers資料夾中,新增productReducers.js
建立兩個reducer,分別為getProductsReducer&getProductDetailsReducer
https://ithelp.ithome.com.tw/upload/images/20210929/20139720u5jSq6l95X.png
https://ithelp.ithome.com.tw/upload/images/20210929/20139720rSFBVHdwHF.png
上面那些actionType為昨天說的constants資料夾裡的productConstants.js所設定的常數

###Store
將reducers引入到store.js
https://ithelp.ithome.com.tw/upload/images/20210929/201397209OXQnBFRxE.png

###Actions
在reducers資料夾中,新增productActions.js
dispatch(派送)各個actions from 資料庫
https://ithelp.ithome.com.tw/upload/images/20210929/20139720vJX0XLjBnc.png
https://ithelp.ithome.com.tw/upload/images/20210929/201397200k9rY2SliH.png


參考教學網站:https://www.youtube.com/watch?v=0divhP3pEsg&t=786s


  • 明天繼續/images/emoticon/emoticon29.gif

上一篇
Day 26-製作購物車之設定Redux: reducers&store
下一篇
Day 28-製作購物車之Redux 3
系列文
初學者對於做購物車系統的分析30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言