React-Redux的基本用法

 React-Redux 將所有組件分成兩大類：UI 組件（presentational component）和容器組件（container component）。

 1. 因爲UI組件不含有狀態，UI 組件又稱爲"純組件"，即它純函數一樣，純粹由參數決定它的值。

 2. 容器組件：

特徵：負責管理數據和業務邏輯，不負責 UI 的呈現
   帶有內部狀態
        使用 Redux 的 API

React-Redux 規定，所有的 UI 組件都由用戶提供，容器組件則是由 React-Redux 自動生成。也就是說，用戶負責視覺層，狀態管理則是全部交給它。

3. connect（）

Reac-Redux提供的connect（）用於從UI組件生成容器組件。

connect（）的完整api：

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

上面代碼中，connect方法接受兩個參數：mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯，即將state映射到 UI 組件的參數（props），後者負責輸出邏輯，即將用戶對 UI 組件的操作映射成 Action。

4.mapStateToProps

mapStateToProps是一個函數。它的作用是建立一個從（外部的）state對象到（UI組件的）props對象的映射關係。

作爲函數，mapStateToProps執行後應該返回一個對象，裏面的每一個鍵值對就是一個映射。 

5.mapDispatchToProps

mapDispatchToProps是connect函數的第二個參數，用來建立 UI 組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應該當作 Action，傳給 Store。它可以是一個函數，也可以是一個對象。
如果mapDispatchToProps是一個函數，會得到dispatch和ownProps（容器組件的props對象）兩個參數。

6.Provider組件

React-Redux 提供Provider組件，可以讓容器組件拿到state。

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

render() {
	return(
	    <Provider store={store}>
              <App />
            </Provider>,
	);
}