如何通俗易懂的理解 redux

RaoMeng 發(fā)布于2019-08-21 17:53 / 1293人閱讀

摘要：的學(xué)習(xí)筆記首先先了解下什么是框架框架視圖用戶(hù)界面。創(chuàng)建數(shù)組，保存監(jiān)聽(tīng)函數(shù)獲取倉(cāng)庫(kù)中當(dāng)前狀態(tài)只有調(diào)用方法才能更新倉(cāng)庫(kù)合并狀態(tài)執(zhí)行監(jiān)聽(tīng)函數(shù)，更新添加監(jiān)聽(tīng)函數(shù)由于每次執(zhí)行后，都會(huì)執(zhí)行所以這一行的作用就是在初始化中所有的節(jié)點(diǎn)。

redux的學(xué)習(xí)筆記 首先先了解下什么是MVC框架

MVC框架（Model-View-Controller）

視圖（View）：用戶(hù)界面。 => 傳送指令到 Controller
控制器（Controller）：業(yè)務(wù)邏輯 => 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)
模型（Model）：數(shù)據(jù)保存 => 將新的數(shù)據(jù)發(fā)送到 View，用戶(hù)得到反饋

來(lái)個(gè)小故事幫助理解

故事的主人公小明，辛苦打拼多年，終于存到了買(mǎi)房的錢(qián)，于是就屁顛屁顛的在首都的郊區(qū)買(mǎi)了一套120的毛坯房（當(dāng)前的房子的state），因?yàn)槭敲鞣浚匀皇浅隽艘恍┗A(chǔ)設(shè)施其他啥也沒(méi)有（initState），這問(wèn)題就來(lái)了，這毛坯房也不能住啊 ，這剛買(mǎi)完房也沒(méi)多少積蓄了，就想著找裝修公司簡(jiǎn)裝下，問(wèn)了價(jià)格之后，小明直接就憑著當(dāng)年在幼兒園打下的美術(shù)基礎(chǔ)畫(huà)了一張?jiān)O(shè)計(jì)圖,然后就和自己老婆分配了任務(wù)，誰(shuí)該做什么，例如小明粉刷墻，經(jīng)過(guò)多天努力，總算是裝修完成了，此時(shí)小明的新房，從一個(gè)毛坯房，變成了一個(gè)豪華的毛坯房（更新之后的房子的state）

1.首先回顧下這個(gè)故事：小名的毛坯房 --> 畫(huà)出裝修圖紙 --> 小明分配任務(wù) --> 小明和自己老婆裝修 --> 豪華毛坯房
2.再來(lái)說(shuō)下Redux里的幾個(gè)核心概念,這里我們把React也加進(jìn)來(lái)：

view(React)

store(state)

action

reducer

3.接下來(lái)看看Redux/React與這個(gè)故事的聯(lián)系：

view(React) = 第一次看到毛坯房

store(state) = 毛坯房空空如也，什么都沒(méi)有，只有基礎(chǔ)設(shè)施

action = 小明分配任務(wù)(誰(shuí)應(yīng)該干什么)

reducer = 具體任務(wù)都干些什么(小明粉刷墻)

4.所以這個(gè)過(guò)程應(yīng)該是這樣的
view ---> action ---> reducer ---> store(state) ---> view

5.如果放入一個(gè)web app中，首先store(state)決定了view，然后用戶(hù)與view的交互會(huì)產(chǎn)生action，這些action會(huì)觸發(fā)reducer因而改變state，然后state的改變又造成了view的變化。

redux 源碼簡(jiǎn)單分析

redux中主要方法:

createStore

combineReducers

bindActionCreators

applyMiddleWare

compose

這里主要分析一下createStore(reducer)

原函數(shù)有三個(gè)參數(shù)，這里只分析第一個(gè)參數(shù)reducer
參數(shù):reducer


reducer: function類(lèi)型（而且是純函數(shù)），reducer的作用是，根據(jù)指定的action的type，進(jìn)行處理state，返回新的state

參數(shù):


action: 是一個(gè)對(duì)象或者函數(shù)（最終返回的也是對(duì)象），type是action必須有的屬性，reducer根據(jù)action.type處理state

state: 需要在這里初始化state，不然會(huì)報(bào)錯(cuò)


因?yàn)閞educer合并狀態(tài)是覆蓋式，所以需要先解構(gòu)出當(dāng)前狀態(tài)，再進(jìn)行處理

store的返回值:返回值是三個(gè)方法


dispatch: 分發(fā)action，只能用dispatch修改store中的狀態(tài)

根據(jù)action查詢(xún)r(jià)educer中變state的方法，更新store tree
變更store tree后，依次執(zhí)行listener中所有響應(yīng)函數(shù)



getState: 獲取倉(cāng)庫(kù)中當(dāng)前狀態(tài)

subscribe: 注冊(cè)監(jiān)聽(tīng)函數(shù)，監(jiān)聽(tīng)state的變化
store 可以理解為一個(gè)全局變量，保存著你項(xiàng)目中所有需要保存的數(shù)據(jù)，而這個(gè)全局變量加了一把密碼鎖，只有指定的密碼（dispatch（{type:AAA}））進(jìn)行修改，因?yàn)槟阆氚。羰钦l(shuí)都能修改這個(gè)全局變量，而在你用這個(gè)變量之前，可能執(zhí)行的其他程序已經(jīng)對(duì)這個(gè)變量進(jìn)行了修改，這也是我們平時(shí)開(kāi)發(fā)的時(shí)候避免全局變量的原因，所以就要提高修該數(shù)據(jù)的權(quán)限。

    let createStore = (reducer)=>{
        var state;
        let listeners = []; 
         //創(chuàng)建數(shù)組，保存監(jiān)聽(tīng)函數(shù)
    
        let getState = ()=>state;
       // 獲取倉(cāng)庫(kù)中當(dāng)前狀態(tài)
       
        function dispatch(action){
            // 只有調(diào)用dispatch方法才能更新倉(cāng)庫(kù)
            state = reducer(state,action);
            // 合并狀態(tài)
            listeners.forEach(listener=>listener());
            //執(zhí)行監(jiān)聽(tīng)函數(shù)，更新view
        }
        
        let subscribe = (listener)=>{
        listeners.push(listener);
        // 添加監(jiān)聽(tīng)函數(shù)
        }
        dispatch({})
        // 由于每次dispatch執(zhí)行后，redux都會(huì)執(zhí)行reducer
        //所以這一行的作用就是在初始化store tree中所有的state節(jié)點(diǎn)。
        return {
            getState,
            dispatch,
            subscribe
        }
    }