react-redux

React

定義：

React 是一個用於構建用戶界面的 JAVASCRIPT 庫。
React主要用於構建UI，React 被認爲是 MVC 中的 V（視圖）。

特色：

1. 聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。

2. 高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。

3. 靈活 −React能夠與已知的庫或框架很好地配合。

4. JSX − JSX 是 JavaScript 語法的擴展

5. 組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

6. 單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。

爲何須要Redux？

React 只是 DOM 的一個抽象層，並非 Web 應用的完整解決方案。有兩個方面，react沒有涉及：

1. 代碼結構

2. 組件之間的通訊

React 可以根據 state 的變化來更新 view，setState 方法用於改變組件當前的 state，因此能夠把更改 state 的邏輯寫在各自的組件裏，但這樣作的問題在於，當項目邏輯變得愈來愈複雜的時候，將很難理清 state 跟 view 之間的對應關係（一個 state 的變化可能引發多個 view 的變化，一個 view 上面觸發的事件可能引發多個 state 的改變）。咱們須要對全部引發 state 變化的狀況進行統一管理，這種狀況下，就可能須要用到redux了。

簡單說，React的核心是使用組件定義界面的表現，那麼在使用React的時候咱們一般還須要一套機制去管理組件與組件之間，組件與數據模型之間的通訊。

Redux

核心概念：

• Store
  做用：保存數據的地方，用於管理整個應用的數據。它其實是一個 Object tree ，整個應用只能有一個 Store。

  產生：傳入 reducer 和可選的初始 state 值，經過 createStore 方法生成

  const store = createStore(reducer,initialState)

• Action
  做用：描述用戶的行爲，也就是 View 發出的通知，被 store 接收
  產生：經過 action creator 產生

  const ADD_TODO = '添加 TODO';
  function addTodo(text) {
    return {
      type: ADD_TODO,
      text
    }
  }
  const action = addTodo('Learn Redux')

• Reducer
  做用：根據 action，計算出新的 state，是一個純函數
  產生：傳入 state 和 action 參數，返回一個新的 state

  const reducer = function (state, action) {
    // ...
    return new_state;
  }

  reducer 能夠進行拆分，每一個子 reducer 分別負責計算 view 上面的特定組件，返回局部的 state，再經過 combineReducers 將 reducer 進行合併，就能夠合併獲得完整的state，刷新視圖。

  const chatReducer = combineReducers({
    chatLog,
    statusMessage,
    userName
  })

redux的工做流程：

Redux應用數據的生命週期遵循下面4個步驟：
1）調用store.dispatch(action), 能夠在任何地方進行;
2）Redux store調用傳入的reducer函數，而且將當前的state樹與action傳入。
3）根reducer將多個子reducer輸出合併成一個單一的state樹;
4）Redux store保存了根reducer返回的完整的state樹。
5）新的state樹就是應用的下一個狀態，如今就能夠根據新的state tree來渲染UI。

Redux與Flux

Flux 是一種架構思想，專門解決軟件的結構問題。它跟 MVC 架構是同一類東西，可是更加簡單和清晰，它跟 React 自己沒什麼關係，它能夠用在 React 上，也能夠用在別的框架上。
Flux 存在多種實現（至少15種），Facebook 官方實現版本：

• View： 視圖層

• Action（動做）：視圖層發出的消息（好比mouseClick）

• Dispatcher（派發器）：用來接收Actions、執行回調函數

• Store（數據層）：用來存放應用的狀態，一旦發生變更，就提醒Views要更新頁面

Flux的數據管理流程：

Redux 的做用跟 Flux 是同樣的，它能夠看做是 Flux 的一種實現，可是又有點不一樣，具體的不一樣總結起來就是：

1. Redux 只有一個 store 而 Flux 裏面會有多個 store 存儲應用數據，並在 store 裏面執行更新邏輯，當 store 變化的時候再通知 controller-view 更新本身的數據，Redux 將各個 store 整合成一個完整的 store，而且能夠根據這個 store 推導出應用完整的 state。

2. 沒有 Dispatcher。 Redux 中沒有 Dispatcher 的概念，它使用 reducer 來進行事件的處理，它根據應用的狀態和當前的 action 推導出新的 state。Redux 中有多個 reducer，每一個 reducer 負責維護應用總體 state 樹中的某一部分，多個 reducer 能夠經過 combineReducers 方法合成一個根reducer，這個根reducer負責維護完整的 state，當一個 action 被髮出，store 會調用 dispatch 方法向某個特定的 reducer 傳遞該 action，reducer 收到 action 以後執行對應的更新邏輯而後返回一個新的 state，state 的更新最終會傳遞到根reducer處，返回一個全新的完整的 state，而後傳遞給 view。

簡單說，Redux 和 Flux 之間最大的區別就是對 store/reducer 的抽象，Flux 中 store 是各自爲戰的，每一個 store 只對對應的 controller-view 負責，每次更新都只通知對應的 controller-view；而 Redux 中各子 reducer 都是由根reducer統一管理的，每一個子reducer的變化都要通過根reducer的整合。

flux與redux對比圖：

flux

redux

React-Redux

爲了方便使用，Redux 的做者封裝了一個 React 專用的庫 React-Redux。
這個庫是能夠選用的。實際項目能夠選擇直接使用 Redux，或者使用 React-Redux。React-Redux 雖然提供了便利，但須要掌握額外的 API，而且要遵照它的組件拆分規範。
React-Redux 將全部組件分紅兩大類：UI 組件和容器組件。

• UI組件特色：

  1. 只負責 UI 的呈現，不帶有任何業務邏輯

  2. 沒有狀態（即不使用this.state這個變量）

  3. 全部數據都由參數（this.props）提供

  4. 不使用任何 Redux 的 API

• 容器組件特色：

  1. 負責管理數據和業務邏輯，不負責 UI 的呈現

  2. 帶有內部狀態

  3. 使用 Redux 的 API

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

React-Redux 部分 API

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

1. connect()用於從 UI 組件生成容器組件。

   connect的意思，就是將這兩種組件連起來。

2. mapStateToProps是一個函數。

   它的做用就是像它的名字那樣，創建一個從（外部的）state對象到（UI 組件的）props對象的映射關係。

   [mapStateToProps(state, [ownProps]): stateProps] (Function)

   任什麼時候候，只要 Redux store 發生改變，mapStateToProps 函數就會被調用。該回調函數必須返回一個純對象，這個對象會與組件的 props 合併。若是你省略了這個參數，你的組件將不會監聽 Redux store。第二個參數 ownProps，爲傳遞到組件的 props。

   mapDispatchToProps是connect函數的第二個參數，用來創建 UI 組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操做應該看成 Action，傳給 Store。它能夠是一個函數，也能夠是一個對象。

3. <Provider> 組件

   connect 方法生成容器組件之後，須要讓容器組件拿到state對象，才能生成 UI 組件的參數。
   React-Redux 提供Provider組件，可讓容器組件拿到state。

React-router

React-router採用react組件的方式來實現router，經過管理 URL，實現組件的切換和狀態的變化。

相關路由組件：

• <Router>：路由容器組件

• <Route>：定義URL路徑與組件的對應關係

• <IndexRoute>: 指定默認狀況下加載的子組件

• <Redirect>: 用於路由的跳轉，即用戶訪問一個路由，會自動跳轉到另外一個路由

• <Link>:用於取代a元素，生成一個連接，容許用戶點擊後跳轉到另外一個路由。它基本上就是a元素的React 版本，能夠接收Router的狀態。

相關路由屬性：

• path 屬性:Route組件的path屬性指定路由的匹配規則

• histroy 屬性: Router組件的history屬性，用來監聽瀏覽器地址欄的變化，並將URL解析成一個地址對象，供 React Router 匹配。

  render((
       <Router >//開始建立路由表
         <Route path="/" component={App}>//聲明每個路由
           <Route path="/about" component={About}/>
           <Route path="users" component={Users}>//每一個路由
         </Route>
       </Router>
     ), document.getElementById('example'))

Demo的思路：

1. 設計好整個應用的state

2. 根據用戶在view上的行爲，定義好全部action

3. 根據定義好的action，建立相應的reducer處理state，合併reducer

4. 根據定義好的reducer，生成store

5. 經過<Provider>組件，將store傳入router組件使用

6. 編寫UI組件，並經過connect自動生成容器組件

7. 根據url，react-router調用相應的組件，顯示view