iT邦幫忙

2

React 學習筆記_25(在React中使用Redux - 1)

  • 分享至 

  • xImage
  •  

簡介

雖然Redux與React沒有關係,可以用Redux搭配Angular,JQuery甚至原生JavaScript,不過由於React是單向資料流的形式,若要將兩個平行的Component(不具有父子層關係)互相傳遞State非常麻煩,需要不斷的將state提升到共同的父層,而Redux就很好的能夠處理這個麻煩的問題,Redux可以統一管理State,將State拉升到大家共同都能夠繼承到的地方,並且開發時能將UI與資料處理分開,UI交給React Component處理,資料處理就拉到Redux進行。

安裝React Redux

yarn add redux 
yarn add react-redux  

Presentational 和 Container Component

在開發React-Redux的專案時,分離Presentational Component與Container Component是非常重要的,可以參考Presentational and Container Components這篇文章,他將這個概念介紹得很清楚,簡單來說Presentational組件負責UI的渲染,他所接收到的資料都來自於props(組件內沒有state),而Container組件負責數據的處理並將處理完的數據向下傳遞給Presentational組件並選染UI。

...|Presentational Components | Container Component
------------- | -------------
用途|選染UI | 處理數據(更新State)
使用Redux | 否|是
獲取資料|透過props|綁定Redux State
改變資料|從props呼叫callback|dispatch(action)

設計Component

在介紹完Redux之後,裡用Redux官網的TodoList範例,實際練習一下該如何將Redux與React結合。

Presentational Component

記得Presentatiional Component是負責選染UI的組件,下面整理了所需要的Presentational Component與他們所需要的props。

  • TodoList : 顯示Todos的清單。
    • todos : Array中包含了各個todo內容{id,text,completed}
    • onTodoClick(id:number) : 當todo被點擊時觸發的callback,功能是將該todo變更completed狀態
  • Todo : 單一Todo項目。
    • Text : string, 顯示個Todo事項
    • completed : boolean, 該todo項目是否完成
    • onClick() : function, 當todo被點擊時觸發的callback,功能是將該todo變更completed狀態
  • Link : 連結Footer,內涵的callback function將改變使用者觀看Todos位置。
    • onClick() : function, 當一個Link被點擊時觸發,功能是將改變使用者可見的Todos位置
  • Footer : 讓使用者改變現在可見Todos的位置,連接著Link進行改變。
  • App : 負責render所有組件的root Component。

Container Component

Container Conponent是負責處理數據並且將Presentational 與 Redux連結起來。

  • VisibleTodoList : 根據目前篩選的Filter選擇顯示哪些Todos,負責將TodoList與Redux綁定。
  • FooterLink : 拿到目前篩選的Filter,負責將Link與Redux綁定
    • filter : string, 篩選的Filter

其他Component

有時候也些Component很難分辨是presentational component 還是 container component,比如有些form或是function會需要同時渲染UI又得處理數據,雖然在大型的專案中還是會將這種類型的Component拆成兩種組件,不過由於我們這個練習相對單純,所以目前保持混用。

  • AddTodo : 包含inputbutton負責新增Todo到TodosList中。

參考資料 :
從Redux 的作者學習它
Presentational and Container Components
React 與他的快樂小夥伴 Redux -基礎教學


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言