iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0

⭐任務說明

今天來學一點 Redux

在介紹 Redux 之前

在前面的任務中,我們也有學習到使用 useState 與 useReducer 進行管理狀態,我們可能會遇到以下狀況

  • 狀態可能會變得很複雜難以管理
  • 可能導致會包很多層的 jsx
  • 不必要的區塊重複渲染

Redux 是什麼

一個跨元件的狀態管理工具,可以想像他是一個集中儲存狀態的地方,當指定的項目資料有變化時就會觸發,指定的元件就可以得到所需要的資料

他有幾個概念

  • Store:集中儲存應用程式的狀態
  • Reducer:基本上元件中不直接操作狀態,將透過 Reducer 進行資料的計算與更新並產生結果,Reducer是一個函數
  • Action:當元件觸發了某些行為動作,需要由 reducer 執行的項目項目將會由 Redux 轉發給 reducer

經過上面三項,最後會由指定元件收到通知,就可以更新 UI 畫面

結語

理解 Redux 的運作模式,我們下個任務見!


上一篇
DAY 26 - React Router 中的 Hook
下一篇
DAY 28 - 來實作一個 TodoList 吧!(一)
系列文
30 天大冒險:新手勇闖 React 大秘境30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言