簡介

雖然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 : 包含input與button負責新增Todo到TodosList中。

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