React 實戰 | React Redux 的使用指南

React Redux

React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數據，並且向store分發actions以更新數據。細節參考React Redux官方英文文檔

安裝

npm install react-redux
或
yarn add react-redux

Provider

<Provider / >全局使用

Connect() 連接組件和store，容器屬性中使用

兩個參數：mapStateToProps和mapDispatchToProps

使用mapStateToProps抽取數據（mapState）

作爲connect的第一個參數，每當store state 改變時就被調用

不希望訂閱store，傳遞null或undefined替代mapStateToProps。

接收整個store state，並返回一個組件需要的數據對象

• 聲明：function mapStateToProps(state, ownProps?)返回連接組件需要的數據的純對象。

1. State，整個store state對象
2. ownProps（可選），組件需要用自身的props數據從store中檢索出數據，傳入ownProps。包含所有傳遞被connect的組件的props。
3. 返回值，包含組件用到的數據的純對象
   每個對象字段作爲組建的props
   字段中的值用來判斷組件是否需要重新渲染

• 使用指南：使用mapStateToProps改造從store中取出的數據

1. 使用Selector方法去抽取和轉化數據
2. mapStateToProps方法應該足夠快
3. mapStateToProps方法應該純淨且同步

• mapStateToProps和性能

1. 僅在需要時返回新的對象引用（淺比較）
   使用selector function，只在輸入值發生改變後運行。
2. 僅在數據改變時運行開銷大的操作
   一些轉化可以在action創建函數或者reducer中運算，把轉化過的數據存儲在store中
   轉化也可以在組件的render()生命週期中完成
   若轉化必須在mapStateToProps方法中完成，建議使用selector function

• 行爲與總結

1. mapStateToProps在store state相同的情況下不會運行
2. 聲明參數的數量影響行爲
   不應該增加ownProps參數，除非你實在是需要它。

使用mapDispatchToProps分發actions

• 分發actions的路徑：

1. 默認地，一個已連接組件可以接收props.dispatch然後自己分發actions
2. Connect能夠接收mapDispatchToProps作爲第二個參數
   更加聲明式
   指明你的組件所實際需要分發的那些actions，把所有的action creators使用函數封裝起來
   把action分發邏輯向子（未連接）組件傳遞

• 兩種mapDispatchToProps的形式

1. 函數形式，更高自由度、能夠訪問dispatch和可選擇的ownProps
2. 對象形式，更聲明式，更易於使用（建議使用）

將mapDispatchToProps定義爲一個函數**

1. 參數： dispatch、ownProps（可選）

• 返回值：返回一個純對象

1. 每一個對象的字段都會作爲你的組件的一個獨立prop，並且字段的值通常是一個調用後能分發action的函數。
2. 如果你在dispatch()中使用了action創建函數（區別於純對象形式的action），通常約定字段名與action創建函數的名稱相同

• 使用bindActionCreators定義mapDispatchToProps函數
  bindActionCreators 接收兩個參數：

1. 一個函數（action creator）或一個對象（每個屬性爲一個action creator）
2. Dispatch

• 手動注入dispatch
  可以通過在mapDispatchToProps的return中添加dispatch把它重新注入你的組件

將mapDispatchToProps定義爲一個對象

1. 每個mapDispatchToProps對象的字段都被假設爲一個action創建函數
2. 你的組件不再接收dispatch作爲一個prop