首先我們來看看，什么是 Redux ?
Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。Redux 除了和 React 一起用外，還支持其它界面庫 Angular、Ember、jQuery 甚至純 JavaScript。 它體小精悍（只有2kB，包括依賴）。
下面是 Redux 的工作流程：
那么什么是 React 呢？
React 是一個用于構建用戶界面的 JavaScript 庫。
React 只是 DOM 的一個抽象層，代碼結構和組件之間的通信是沒有涉及的，對于大型復雜的應用來說，這卻是極其重要的，因此，React 沒法寫大型應用。
如果在你的項目中，某個組件的狀態需要共享，或者某個狀態需要在任何地方可以拿到，或者需要在某個組件中改變全局狀態，或者需要在一個組件中改變另一個組件的狀態，這時，可以考慮使用 Redux。
現在來看看什么是 React-Redux？
React-Redux 是 Redux 官方提供的 React 綁定庫。 具有高效且靈活的特性。它能夠使你的 React 組件從 Redux store 中讀取數據，并且向 store 分發 actions 以更新數據。
React-Redux 庫并不是 Redux 內置，需要單獨安裝。
安裝
npm install --save react-redux
React-Redux 依賴 React 0.14 或更新版本。
如果你不使用 npm，你也可以從 unpkg 獲取最新的 UMD 包（包括開發環境包和生產環境包）。如果你用 <script> 標簽的方式引入 UMD 包，那么它會在全局拋出window.ReactRedux對象。
React-Redux 是基于 容器組件和展示組件相分離 的開發思想
React-Redux 將所有組件分成兩大類：UI 組件（presentational component）和容器組件（container component）。
UI 組件
- 只負責 UI 的呈現，不帶有任何業務邏輯（骨架、樣式）
- 沒有狀態（即不使用this.state這個變量）
- 所有數據都由參數（this.props）提供
- 不使用任何 Redux 的 API
容器組件
- 負責管理數據和業務邏輯，不負責 UI 的呈現（數據獲取、狀態更新）
- 帶有內部狀態
- 使用 Redux 的 API
UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。
如果一個組件既有 UI 又有業務邏輯，那怎么辦？可以將它進行拆分，外面是一個容器組件，里面是一個 UI 組件。前者負責與外部的通信，將數據傳給里面的 UI 組件，由 UI 組件負責渲染出視圖。
從技術上講，可以直接使用 store.subscribe() 來編寫容器組件。但這么做的話無法使用 React-Redux 帶來的性能優化以避免很多不必要的重復渲染。因此，不要手寫容器組件，而使用 React-Redux 的 connect() 方法來生成。也就是說，用戶負責視覺層，狀態管理則是全部交給它。
現在開始來創建一些容器組件把展示組件和 Redux 關聯起來。
connect()
connect() 方法接受兩個參數：mapStateToProps 和 mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯，即將 state 映射到 UI 組件的參數（props），后者負責輸出邏輯，即將用戶對 UI 組件的操作映射成 Action。
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
上面的 VisibleTodoList 便是通過 connect 方法自動生成的容器組件，使之與 UI 組件 TodoList 相關聯。
mapStateToProps
mapStateToProps 這個函數來指定如何把當前 Redux store state 映射到展示組件的 props 中。執行后應該返回一個對象，里面的每一個鍵值對就是一個映射。
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
mapStateToProps 是一個函數，它接受 state 作為參數，返回一個對象。這個對象有一個 todos 屬性，代表 UI 組件的同名參數，后面的 getVisibleTodos 也是一個函數，可以從 state 算出 todos 的值。
mapDispatchToProps
mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示組件的 props 中的回調方法。
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
mapDispatchToProps 定義了哪些用戶的操作應該當作 Action，傳給 Store。它可以是一個函數，也可以是一個對象。
- mapDispatchToProps 是函數則會得到 dispatch 和 ownProps（容器組件的 props 對象）兩個參數，應該返回一個對象，該對象的每個鍵值對都是一個映射，定義了 UI 組件的參數怎樣發出 Action。
- mapDispatchToProps 是一個對象，它的每個鍵名也是對應 UI 組件的同名參數，鍵值應該是一個函數，會被當作 Action creator ，返回的 Action 會由 Redux 自動發出。
將容器放到一個組件
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
export default App
傳入 Store
有兩種方式可以讓所有的容器組件訪問到 Redux store，一種是把它以 props 的方式傳入到所有的容器組件中，也就是需要用 store 把展示組件包裹一層。另一種方法是用 React-Redux 組件 <Provider> 讓所有容器組件都可以訪問 store，而不需要顯示地傳遞它，只需要在渲染根組件中使用即可。
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
上面代碼中，Provider 在根組件外面包了一層，這樣一來，App 的所有子組件就默認都可以拿到 state 了。
在實際的項目中，需要權衡是直接使用 Redux 還是使用 React-Redux。
