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;
}复制代码