React-Redux - 簡書

首先我們來看看，什么是 Redux ?

Redux 是 JavaScript 狀態(tài)容器诺凡，提供可預測化的狀態(tài)管理。Redux 除了和 React 一起用外整份，還支持其它界面庫 Angular铲敛、Ember褐澎、jQuery 甚至純 JavaScript。它體小精悍（只有2kB伐蒋，包括依賴）工三。

下面是 Redux 的工作流程：

Redux 的工作流程

那么什么是 React 呢迁酸？

React 是一個用于構(gòu)建用戶界面的 JavaScript 庫。

React 只是 DOM 的一個抽象層俭正，代碼結(jié)構(gòu)和組件之間的通信是沒有涉及的奸鬓，對于大型復雜的應(yīng)用來說，這卻是極其重要的段审，因此全蝶，React 沒法寫大型應(yīng)用。

如果在你的項目中寺枉，某個組件的狀態(tài)需要共享抑淫，或者某個狀態(tài)需要在任何地方可以拿到，或者需要在某個組件中改變?nèi)譅顟B(tài)姥闪，或者需要在一個組件中改變另一個組件的狀態(tài)始苇，這時，可以考慮使用 Redux筐喳。

現(xiàn)在來看看什么是 React-Redux催式？

React-Redux 是 Redux 官方提供的 React 綁定庫。具有高效且靈活的特性避归。它能夠使你的 React 組件從 Redux store 中讀取數(shù)據(jù)荣月，并且向 store 分發(fā) actions 以更新數(shù)據(jù)。

React-Redux 庫并不是 Redux 內(nèi)置梳毙，需要單獨安裝哺窄。

安裝

npm install --save react-redux

React-Redux 依賴 React 0.14 或更新版本。

如果你不使用 npm账锹，你也可以從 unpkg 獲取最新的 UMD 包（包括開發(fā)環(huán)境包和生產(chǎn)環(huán)境包）萌业。如果你用 <script> 標簽的方式引入 UMD 包，那么它會在全局拋出window.ReactRedux對象奸柬。

React-Redux 是基于容器組件和展示組件相分離的開發(fā)思想

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

UI 組件

只負責 UI 的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯（骨架廓奕、樣式）
沒有狀態(tài)（即不使用this.state這個變量）
所有數(shù)據(jù)都由參數(shù)（this.props）提供
不使用任何 Redux 的 API

容器組件

負責管理數(shù)據(jù)和業(yè)務(wù)邏輯抱婉，不負責 UI 的呈現(xiàn)（數(shù)據(jù)獲取、狀態(tài)更新）
帶有內(nèi)部狀態(tài)
使用 Redux 的 API

UI 組件負責 UI 的呈現(xiàn)桌粉，容器組件負責管理數(shù)據(jù)和邏輯授段。

如果一個組件既有 UI 又有業(yè)務(wù)邏輯，那怎么辦番甩？可以將它進行拆分侵贵，外面是一個容器組件，里面是一個 UI 組件缘薛。前者負責與外部的通信窍育，將數(shù)據(jù)傳給里面的 UI 組件卡睦，由 UI 組件負責渲染出視圖。

從技術(shù)上講漱抓，可以直接使用 store.subscribe() 來編寫容器組件表锻。但這么做的話無法使用 React-Redux 帶來的性能優(yōu)化以避免很多不必要的重復渲染。因此乞娄，不要手寫容器組件瞬逊，而使用 React-Redux 的 connect() 方法來生成。也就是說仪或，用戶負責視覺層确镊，狀態(tài)管理則是全部交給它。

現(xiàn)在開始來創(chuàng)建一些容器組件把展示組件和 Redux 關(guān)聯(lián)起來范删。

connect()

connect() 方法接受兩個參數(shù)：mapStateToProps 和 mapDispatchToProps蕾域。它們定義了 UI 組件的業(yè)務(wù)邏輯。前者負責輸入邏輯到旦，即將 state 映射到 UI 組件的參數(shù)（props）旨巷，后者負責輸出邏輯，即將用戶對 UI 組件的操作映射成 Action添忘。

import { connect } from 'react-redux'

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

export default VisibleTodoList

上面的 VisibleTodoList 便是通過 connect 方法自動生成的容器組件采呐，使之與 UI 組件 TodoList 相關(guān)聯(lián)。

mapStateToProps

mapStateToProps 這個函數(shù)來指定如何把當前 Redux store state 映射到展示組件的 props 中搁骑。執(zhí)行后應(yīng)該返回一個對象懈万，里面的每一個鍵值對就是一個映射。

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 是一個函數(shù)靶病，它接受 state 作為參數(shù)，返回一個對象口予。這個對象有一個 todos 屬性娄周，代表 UI 組件的同名參數(shù)，后面的 getVisibleTodos 也是一個函數(shù)沪停，可以從 state 算出 todos 的值煤辨。

mapDispatchToProps

mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示組件的 props 中的回調(diào)方法。

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

mapDispatchToProps 定義了哪些用戶的操作應(yīng)該當作 Action木张，傳給 Store众辨。它可以是一個函數(shù)，也可以是一個對象舷礼。

mapDispatchToProps 是函數(shù)則會得到 dispatch 和 ownProps（容器組件的 props 對象）兩個參數(shù)鹃彻，應(yīng)該返回一個對象，該對象的每個鍵值對都是一個映射妻献，定義了 UI 組件的參數(shù)怎樣發(fā)出 Action蛛株。
mapDispatchToProps 是一個對象团赁，它的每個鍵名也是對應(yīng) UI 組件的同名參數(shù)，鍵值應(yīng)該是一個函數(shù)谨履，會被當作 Action creator 欢摄，返回的 Action 會由 Redux 自動發(fā)出。

將容器放到一個組件

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 了东涡。

在實際的項目中冯吓，需要權(quán)衡是直接使用 Redux 還是使用 React-Redux。