React-redux 是一個封裝的專用庫，它給redux的提供了更多的API，提升了便利性。

1. 添加 React-redux 到項目

react-redux并不是內(nèi)置在redux里的，因此要單獨(dú)添加：
cd到項目目錄，執(zhí)行
yarn add react-redux

2. React-redux 的組件拆分規(guī)范

react-redux把組件分成了兩個大類：UI組件 和 容器組件

UI組件

UI組件的特征有：

• 只負(fù)責(zé)UI渲染，不帶有業(yè)務(wù)邏輯
• 是典型的無狀態(tài)組件，沒有state，所有數(shù)據(jù)由props提供
• 不使用Redux的API

容器組件

容器組件的特征有：

• 負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI渲染
• 有內(nèi)部狀態(tài)
• 使用Redux的API

對于一個既有UI又有業(yè)務(wù)邏輯的組件，通常用容器組件將UI組件包住，容器組件將數(shù)據(jù)傳給
UI組件，由UI組件來渲染視圖。

React-redux 的組件拆分

React-redux規(guī)定，所有的UI組件由我們來編寫，而容器組件由React-redux自動生成。我們可以把組件的狀態(tài)管理全都交給它來完成。

3. 應(yīng)用 React-redux

首先引入connect到組件中，它是一個方法；

import { connect } from 'react-redux';

然后通過connect方法對UI組件進(jìn)行和容器組件進(jìn)行連接：

connect( mapStateToProps, mapDispatchToProps )( TodoList );

這個連接是什么意思呢？

這里假設(shè)我們寫好了一個名為TodoList的UI組件，
mapStateToProps 定義了組件的輸入邏輯，即組件的公共數(shù)據(jù)state映射到UI組件中props的規(guī)則。

mapStateToProps是一個函數(shù)，通過返回對象的鍵值對來聲明這種映射關(guān)系。

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
};

mapDispatchToProps定義了組件的輸出邏輯，即組件如何通過action對state進(jìn)行修改的規(guī)則；

mapDispatchToProps可以是一個函數(shù)，它會得到dispatch和ownProps兩個參數(shù)，返回一個包含映射關(guān)系的對象：

const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e) {
      const action = getInputChangeAction(e.target.value);
      dispatch(action);
    }
    ... 
  }
};

也可以直接定義成一個對象，

const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}

分別定義好了mapStateToProps和mapDispatchToProps之后，通過connect方法即可根據(jù)業(yè)務(wù)邏輯生成容器組件，并且把容器組件和UI組件連接起來。

進(jìn)行到這一步，我們發(fā)現(xiàn)容器組件還沒有取得state，也就是還未與store連接起來，要利用Provider組件，在根組件的外部再包上一層即可：

import { Provider } from 'react-redux';

const App = (
  <Provider store={store}>  {/*連接 */}
    <TodoList />
  </Provider>
);

這樣之后，包含在Provider組件里面的所有子組件就都可以取得state了。

4. 細(xì)枝末節(jié)（備忘錄）

前面好像沒有說明怎么用react-redux生成的容器組件來編寫UI組件代碼。
mapStateToProps、dispatchToProps 已經(jīng)把 state 和 ActionCreators 映射到 props上了，
因此在UI組件中可以通過 this.props直接取得它們：

    const { inputValue, 
            list, 
            changeInputValue, 
            addListItem,
            deleteListItem
          } = this.props;
          
       ....   
value = {inputValue}
onChange = {changeInputValue}
       ....

參考資料：
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html