redux 學習筆記（一）

lllllllllllllll發表於2017-12-05
Redux筆記

redux的學習筆記

MVC框架（Model-View-Controller）
  • 檢視（View）：使用者介面。 => 傳送指令到 Controller
  • 控制器（Controller）：業務邏輯 => 完成業務邏輯後，要求 Model 改變狀態
  • 模型（Model）：資料儲存 => 將新的資料傳送到 View，使用者得到反饋
小故事

故事的主人公小明，辛苦打拼多年，終於存到了買房的錢，於是就屁顛屁顛的在首都的郊區買了一套120的毛坯房（當前的房子的state），因為是毛坯房，自然是出了一些基礎設施其他啥也沒有（initState），這問題就來了，這毛坯房也不能住啊 ，這剛買完房也沒多少積蓄了，就想著找裝修公司簡裝下，問了價格之後，小明直接就憑著當年在幼兒園打下的美術基礎畫了一張設計圖,然後就和自己老婆分配了任務，誰該做什麼，例如小明粉刷牆，經過多天努力，總算是裝修完成了，此時小明的新房，從一個毛坯房，變成了一個豪華的毛坯房（更新之後的房子的state）

1.首先回顧下這個故事： 小名的毛坯房 --> 畫出裝修圖紙 --> 小明分配任務 --> 小明和自己老婆裝修 --> 豪華毛坯房
2.再來說下Redux裡的幾個核心概念,這裡我們把React也加進來：

  • view(React)
  • store(state)
  • action
  • reducer

3.接下來看看Redux/React與這個故事的聯絡：

  • view(React) = 第一次看到毛坯房
  • store(state) = 毛坯房空空如也，什麼都沒有，只有基礎設施
  • action = 小明分配任務(誰應該幹什麼)
  • reducer = 具體任務都幹些什麼(小明粉刷牆)

4.所以這個過程應該是這樣的 view ---> action ---> reducer ---> store(state) ---> view

5.如果放入一個web app中，首先store(state)決定了view，然後使用者與view的互動會產生action，這些action會觸發reducer因而改變state，然後state的改變又造成了view的變化。

redux 原始碼簡單分析

redux中主要方法:

  • createStore
  • combineReducers
  • bindActionCreators
  • applyMiddleWare
  • compose
這裡主要分析一下createStore(reducer)

原函式有三個引數，這裡只分析第一個引數reducer 引數:reducer

  • reducer: function型別（而且是純函式），reducer的作用是，根據指定的action的type，進行處理state，返回新的state
  • 引數:
    • action: 是一個物件或者函式（最終返回的也是物件），type是action必須有的屬性，reducer根據action.type處理state
    • state: 需要在這裡初始化state，不然會報錯
  • 因為reducer合併狀態是覆蓋式，所以需要先解構出當前狀態，再進行處理
store的返回值:返回值是三個方法
  • dispatch: 分發action，只能用dispatch修改store中的狀態
    • 根據action查詢reducer中變state的方法，更新store tree
    • 變更store tree後，依次執行listener中所有響應函式
  • getState: 獲取倉庫中當前狀態
  • subscribe: 註冊監聽函式，監聽state的變化
  • store 可以理解為一個全域性變數，儲存著你專案中所有需要儲存的資料，而這個全域性變數加了一把密碼鎖，只有指定的密碼（dispatch（{type:AAA}））進行修改，因為你想啊，若是誰都能修改這個全域性變數，而在你用這個變數之前，可能執行的其他程式已經對這個變數進行了修改，這也是我們平時開發的時候避免全域性變數的原因，所以就要提高修該資料的許可權。
    let createStore = (reducer)=>{
        var state;
        let listeners = []; 
         //建立陣列，儲存監聽函式
    
        let getState = ()=>state;
       // 獲取倉庫中當前狀態
       
        function dispatch(action){
            // 只有呼叫dispatch方法才能更新倉庫
            state = reducer(state,action);
            // 合併狀態
            listeners.forEach(listener=>listener());
            //執行監聽函式，更新view
        }
        
        let subscribe = (listener)=>{
        listeners.push(listener);
        // 新增監聽函式
        }
        dispatch({})
        // 由於每次dispatch執行後，redux都會執行reducer
        //所以這一行的作用就是在初始化store tree中所有的state節點。
        return {
            getState,
            dispatch,
            subscribe
        }
    }
複製程式碼

相關文章