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

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

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

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

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

2、Flux

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

其實(shí)Flux在React里的應(yīng)用就類似于Vue中的Vuex的作用，但是在Vue中，Vue是完整的mvvm框架，而Vuex只是一個(gè)全局的插件。

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

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

Flux的流程:

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

3、Redux

注意：flux、redux都不是必須和react搭配使用的，因?yàn)閒lux和redux是完整的架構(gòu)，在學(xué)習(xí)react的時(shí)候，只是將react的組件作為redux中的視圖層去使用了。

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

• 代碼結(jié)構(gòu)
• 組件之間的通信

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

使用場景設(shè)計(jì)思路

不需要redux情況

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

需要redux情況

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

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

• 某個(gè)組件的狀態(tài)，需要共享
• 某個(gè)狀態(tài)需要在任何地方都可以拿到
• 一個(gè)組件需要改變?nèi)譅顟B(tài)
• 一個(gè)組件需要改變另一個(gè)組件的狀態(tài)

Redux的設(shè)計(jì)思想：

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

Redux的使用的三大原則：

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

Redux框架的使用

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

• 不得改寫參數(shù)
• 不能調(diào)用系統(tǒng) I/O 的API
• 不能調(diào)用Date.now()或者M(jìn)ath.random()等不純的方法，因?yàn)槊看螘?huì)得到不一樣的結(jié)果

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

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

//引入創(chuàng)建倉庫方法import {createStore} from "redux"http://默認(rèn)數(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è)置數(shù)據(jù)

1. 獲取數(shù)據(jù) store.getState()
2. 訂閱數(shù)據(jù) store.subscribe(()=>{this.setState(state=>store.getState())})
3. 派發(fā)任務(wù) 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
原因：一個(gè)應(yīng)用只有一個(gè)state，單個(gè)reducer對(duì)數(shù)據(jù)操作很臃腫，so需要按照不同功能去拆分

注意：

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

react-redux(redux擴(kuò)展庫)

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

npm i -S redux react-redux

兩個(gè)核心的api

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

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

   • 把store.getState() 轉(zhuǎn)化為展示組件的props
   • 把actionCreators 轉(zhuǎn)化為展示組件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() 轉(zhuǎn)化為展示組件的props
• 把actionCreators 轉(zhuǎn)化為展示組件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只是一個(gè)對(duì)象，不能包含異步操作，這導(dǎo)致了很多創(chuàng)建action的邏輯只能寫在組件中，代碼量較多也不便于復(fù)用，同時(shí)對(duì)該部分代碼測(cè)試的時(shí)候也比較困難.
常見的異步庫：

• 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實(shí)例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)}