Redux的createStore實作

建立一個計數器範例，點擊頁面會執行累加計數
直接使用 createStore：

import { createStore } from 'redux';

const counter = (state = 0, action) => {

    switch (action.type) {

        case 'INCREMENT':

            return state + 1;

        case 'DECREMENT':

            return state - 1;

        default:

            return state;

    }

}

const store = createStore(counter);

console.log(`initial state : ${store.getState()}`);

store.subscribe(() => {

    document.body.innerHTML = store.getState();

})

document.addEventListener('click', () => {

    store.dispatch({ type: 'INCREMENT' });

});

現在 counter 方法直接沿用，另外建立一個 createStore 方法：

const createStore = (reducer) => {

    // 這個 store 持有 state 變數

    let state;

    const getState = () => state;

    const dispatch = (action) => {

    };

    const subscribe = (listener) => {

    };

    // 回傳的物件被稱為 Redux store

    return { getState, dispatch, subscribe }

};

因為 subscribe() 可以被呼叫很多次，所以需要紀錄這些 listener：

    let listeners = [];

    const subscribe = (listener) => {

        listeners.push(listener)

    };

dispatch() 是唯一可以改變內部 state 的：

    const dispatch = (action) => {

        // 使用當前的 state 和 被 dispatch 的 action 物件當參數呼叫 reducer 計算出新的 state

        state = reducer(state, action);

        // 執行 listeners

        listeners.forEach((listener) => { listener() });

    };

還沒有實作 unsubscribe() 方法，先使用替代方案，在subscribe() 寫一個回傳一個方法：

        // 回傳一個方法

        // 使用方式：

        //     var s1 = store.subscribe(()=>{});

        //     s1(); // unsubscribe

        return () => {

            listeners = listeners.filter(l => l !== listener);

        }

最後在 createStore() 回傳前加入 dispatch({});
為了得到初始 state

createStore 完整範例：

const createStore = (reducer) => {

    let state;

    let listeners = [];

    const getState = () => state;

    const dispatch = (action) => {

        state = reducer(state, action);

        listeners.forEach((listener) => { listener() });

    };

    const subscribe = (listener) => {

        listeners.push(listener);

        return () => {

            listeners = listeners.filter(l => l !== listener);

        }

    };

    dispatch({});

    return { getState, dispatch, subscribe }

};