redux與觀察者模式

鬧鬧不愛鬧發表於2019-03-04
Redux模式

一. 前言

面試官：請你談下redux的設計思想？

我：redux通過createStrore建立store例項，store.dispatch傳遞action，觸發reducer改變資料。

面試官：這個是它的使用方法，我想問下它的設計思想或者用到哪些設計模式。

我：emmm....

先說下redux解決的問題：

redux推崇單一資料來源，即一個web應用狀態只有一個資料來源。以一種比較清晰的方式去維護應用的狀態。這其實也和react的單向資料流吻合。

二. redux中的幾個關鍵概念：

store：

1. store提供資料的get鉤子（store.getState）,不直接提供資料的set，所以必須通過dispatch（action）來set資料。

2. 利用觀察者模式（sub/ pub）連線model和view的中間物件。

view層通過呼叫store.dispatch方法觸發reducer改變model。對應pub。

model層通過呼叫store.subscribe註冊檢視更新事件（setstate），該事件會在資料改變之後被呼叫。對應sub。

reducer

真正改變資料的方法。接受一箇舊的state，返回一個新的state。這種改變方式也體現了redux不可變資料的思想。即一個資料產生，就不會變化，如果要改變這個資料，需要返回一個新的資料引用。

三. 以觀察者模式的思路實現一個簡單的redux

function createStore(reducers) {
    const subList = []; // 註冊事件列表
    let  currentState = initState = reducers(init); // 初始化initState
    
    function subscribe(fun) { // sub
        subList.push(fun);
    }

    function dispatch(action) { // pub
        currentState = reducers(initState, action);
        subList.forEach(fn => fn()); // 將事先註冊的事件遍歷執行。
    }

    function getState() { // state的get鉤子，返回目前的state
        return currentState;
    }
    
    const store = { dispatch, suscribe, getState };
    
    return store;
}複製程式碼


相關文章