摘要：傳統(tǒng)框架的缺陷傳統(tǒng)框架的缺陷模型視圖控制器的縮寫即視圖用戶看到并與之交互的界面。即模型是管理數(shù)據(jù)很多業(yè)務邏輯都在模型中完成。在的三個部件中，模型擁有最多的處理任務。所有的狀態(tài)，保存在一個對象里面唯一數(shù)據(jù)源。

1、傳統(tǒng)MVC框架的缺陷

模型(model)－視圖(view)－控制器(controller)的縮寫
V即View視圖：用戶看到并與之交互的界面。

M即Model模型是管理數(shù)據(jù)：很多業(yè)務邏輯都在模型中完成。在MVC的三個部件中，模型擁有最多的處理任務。

C即Controller控制器：接受用戶的輸入并調用模型和視圖去完成用戶的需求，控制器本身不輸出任何東西和做任何處理。它只是接收請求并決定調用哪個模型構件去處理請求，然后再確定用哪個視圖來顯示返回的數(shù)據(jù)。
缺點
MVC框架的數(shù)據(jù)流很理想，請求先到Controller, 由Controller調用Model中的數(shù)據(jù)交給View進行渲染.
但是在實際的項目中，又是允許Model和View直接通信的。

2、Flux

在2013年，F(xiàn)acebook讓React亮相的同時推出了Flux框架，React的初衷實際上是用來替代jQuery的，Flux實際上就可以用來替代Backbone.js，Ember.js等一系列MVC架構的前端JS框架。

其實Flux在React里的應用就類似于Vue中的Vuex的作用，但是在Vue中，Vue是完整的mvvm框架，而Vuex只是一個全局的插件。

React只是一個MVC中的V(視圖層)，只管頁面中的渲染，一旦有數(shù)據(jù)管理的時候，React本身的能力就不足以支撐復雜組件結構的項目，在傳統(tǒng)的MVC中，就需要用到Model和Controller。Facebook對于當時世面上的MVC框架并不滿意，于是就有了Flux, 但Flux并不是一個MVC框架，他是一種新的思想

• View： 視圖層
• ActionCreator（動作創(chuàng)造者）：視圖層發(fā)出的消息（比如mouseClick）
• Dispatcher（派發(fā)器）：用來接收Actions、執(zhí)行回調函數(shù)
• Store（數(shù)據(jù)層）：用來存放應用的狀態(tài)，一旦發(fā)生變動，就提醒Views要更新頁面

Flux的流程:

1. 組件獲取到store中保存的數(shù)據(jù)掛載在自己的狀態(tài)上
2. 用戶產(chǎn)生了操作，調用actions的方法
3. actions接收到了用戶的操作，進行一系列的邏輯代碼、異步操作
4. 然后actions會創(chuàng)建出對應的action，action帶有標識性的屬性
5. actions調用dispatcher的dispatch方法將action傳遞給dispatcher
6. dispatcher接收到action并根據(jù)標識信息判斷之后，調用store的更改數(shù)據(jù)的方法
7. store的方法被調用后，更改狀態(tài)，并觸發(fā)自己的某一個事件
8. store更改狀態(tài)后事件被觸發(fā)，該事件的處理程序會通知view去獲取最新的數(shù)據(jù)

3、Redux

注意：flux、redux都不是必須和react搭配使用的，因為flux和redux是完整的架構，在學習react的時候，只是將react的組件作為redux中的視圖層去使用了。

React 只是 DOM 的一個抽象層，并不是 Web 應用的完整解決方案。
有兩個方面，它沒涉及:

• 代碼結構
• 組件之間的通信

2013年 Facebook 提出了 Flux 架構的思想，引發(fā)了很多的實現(xiàn)。2015年，Redux 出現(xiàn)，將 Flux 與函數(shù)式編程結合一起，很短時間內就成為了最熱門的前端架構。

使用場景設計思路

不需要redux情況

• 用戶的使用方式非常簡單
• 用戶之間沒有協(xié)作
• 不需要與服務器大量交互，也沒有使用 WebSocket
• 視圖層（View）只從單一來源獲取數(shù)據(jù)

需要redux情況

• 用戶的使用方式復雜
• 不同身份的用戶有不同的使用方式（比如普通用戶和管理員）
• 多個用戶之間可以協(xié)作
• 與服務器大量交互，或者使用了WebSocket
• View要從多個來源獲取數(shù)據(jù)

從組件層面考慮，什么樣子的需要Redux：

• 某個組件的狀態(tài)，需要共享
• 某個狀態(tài)需要在任何地方都可以拿到
• 一個組件需要改變全局狀態(tài)
• 一個組件需要改變另一個組件的狀態(tài)

Redux的設計思想：

1. Web 應用是一個狀態(tài)機，視圖與狀態(tài)是一一對應的。
2. 所有的狀態(tài)，保存在一個對象里面（唯一數(shù)據(jù)源）。

Redux的使用的三大原則：

1. store：單一數(shù)據(jù)源
   整個應用的 state 被儲存在一棵對象結構中，并且這個對象結構只存在于唯一一個 store 中
   不能直接去修改此數(shù)據(jù)源中的數(shù)據(jù)（數(shù)據(jù)深拷貝）
2. State：是只讀的
   state redux中的state
   唯一改變 state 的方法就是觸發(fā) action，action 是一個用于描述已發(fā)生事件的普通對象。
   action只能是一個對象
3. reducer：使用純函數(shù)(reducer)來執(zhí)行修改
   為了描述 action 如何改變 state tree ，你需要編寫 reducer，reducer只是一些純函數(shù)，它接收先前的 state 和 action，并返回新的 state

Redux框架的使用

Reducer必須是一個純函數(shù)
純函數(shù)遵守以下一些約束。

• 不得改寫參數(shù)
• 不能調用系統(tǒng) I/O 的API
• 不能調用Date.now()或者Math.random()等不純的方法，因為每次會得到不一樣的結果

步驟1：創(chuàng)建統(tǒng)一數(shù)據(jù)源

1. 引入redux 生成createStore
2. 創(chuàng)建默認數(shù)據(jù) defaultState
3. 創(chuàng)建 reduces(state,action){}
4. createStore(reduces)創(chuàng)建數(shù)據(jù)源

//引入創(chuàng)建倉庫方法import {createStore} from "redux"http://默認數(shù)據(jù)源數(shù)據(jù)，不能直接修改const defaultStore={    count:1}//reducer出函數(shù) function reducers(state=defaultStore,action){    if(action.type=="incr"){        return{            count:state.count+1        }    }    return state}//創(chuàng)建唯一倉庫const store = createStore(    reducers,)export default store

步驟2：組件中獲取數(shù)據(jù)并設置數(shù)據(jù)

1. 獲取數(shù)據(jù) store.getState()
2. 訂閱數(shù)據(jù) store.subscribe(()=>{this.setState(state=>store.getState())})
3. 派發(fā)任務 store.dispatch(actionCreator)

import React,{Component} from "react"import store from "./store"export default class App extends Component{    constructor(props){        super(props)        this.state = store.getState()        store.subscribe(()=>{            this.setState(state=>store.getState())            })    }    render(){        return(            
                ++            
        )    }    incr=()=>{        const actionCreator=>{            type:"incr",            payLoad:1        }        store.dispatch(actionCreator)    }}

劃分reducer
原因：一個應用只有一個state，單個reducer對數(shù)據(jù)操作很臃腫，so需要按照不同功能去拆分

注意：

1. 分離reducer的時候，每一個reducer維護的狀態(tài)都應該不同
2. 通過store.getState獲取到的數(shù)據(jù)也是會按照reducers去劃分的
3. 劃分多個reducer的時候，默認狀態(tài)只能創(chuàng)建在reducer中，因為劃分reducer的目的，就是為了讓每一個reducer都去獨立管理一部分狀態(tài)

react-redux(redux擴展庫)

React-Redux是Redux的官方針對React開發(fā)的擴展庫。
你可以理解為react-redux就是redux給我們提供一些高階組件
安裝

npm i -S redux react-redux

兩個核心的api

1. Provider: 提供store
   根據(jù)單一store原則 ，一般只會出現(xiàn)在整個應用程序的最頂層。
2. connect: 用于連接容器組件和展示組件

   語法格式為：connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)
   一般來說只會用到前面兩個，它的作用是：

   • 把store.getState() 轉化為展示組件的props
   • 把actionCreators 轉化為展示組件props上的方法

使用
步驟1：定義Provider

• 主程序index.js中定義Provider
• 讓全局的組件共享store中的數(shù)據(jù)

  import React from "react"import ReactDOM from "react-dom"import { Provider } from "react-redux"import store from "./store"import App from "./App"ReactDOM.render(    ,document.getElementById("root"))

步驟2：子程序中使用connect

• 把store.getState() 轉化為展示組件的props
• 把actionCreators 轉化為展示組件props上的方法

1. 傳統(tǒng)使用方式
2. 裝飾器使用方式（推薦使用）

傳統(tǒng)使用方式

import React ,{Component} from "react"import {connect} from "react-redux"import * as actions frm "./countAction"class App exteds Component{    render(){        return (            
                {this.props.count}                ++            
        )    }    incr=()=>{        this.props.incr()    }}const mapStateProps=state=>{    return {count:state.count}}const mapPropsToDIspatch=dispatch=>{    return{        incr(){            dispatch(actions.incr())        }    }}export default connect(mapStateProps,mapPropsToDIspatch)(App)

裝飾器使用方式（推薦使用）

import React ,{Component} from "react"import {connect} from "react-redux"import * as actions frm "./countAction"const mapStateProps=state=>{    return {count:state.count}}const mapPropsToDIspatch=dispatch=>{    return{        incr(){            dispatch(actions.incr())        }    }}@connect(mapStateProps,mapPropsToDIspatch)class App exteds Component{    render(){        return (            
                {this.props.count}                ++            
        )    }    incr=()=>{        this.props.incr()    }}

Redux異步操作(redux-thunk)

通常情況下，action只是一個對象，不能包含異步操作，這導致了很多創(chuàng)建action的邏輯只能寫在組件中，代碼量較多也不便于復用，同時對該部分代碼測試的時候也比較困難.
常見的異步庫：

• Redux-thunk
• Redux-saga
• Redux-effects
• Redux-side-effects
• Redux-loop
• Redux-observable

基于Promise的異步庫：

• Redux-promise
• Redux-promises
• Redux-simple-promise
• Redux-promise-middleware

安裝

npm i -S redux-thunk

使用
在createStore實例store中使用

import {createStore, applyMiddleware} from "redux"import thunk from "redux-thunk"import reducer from  "./countReducer"const store = createStore(    reducer,    applyMiddleware(thunk))export default store

countReducer.js

const incrAction = num=>({    type:"incr",    payload:num})export const incr=>90=>dispatch=>{    setTimeout(()=>{        let num=10        dispatch(incrAction(num))    },1000)}