SOURCE

class Redux {
    constructor(reducer) {
        this.state = {}
        reducer(this.state)
        this.listeners = []
    }
    getState() {
        return this.state
    }
    dispatch(key, value) {
        this.state[key] = value
        this.listeners.forEach(listener => listener())
    }
    subscribe(listener) {
        this.listeners.push(listener)
    }
    // 取消订阅
    offSubscribe(listener) {
        const index = this.listeners.indexOf(listener)
        this.listeners.splice(index, 1)
    }
    // 一次性订阅
    onceSubscribe(listener) {
        const listenerWrap = (...args) => {
            listener(...args)
            this.offSubscribe(listenerWrap)
        }
        this.subscribe(listenerWrap)
    }
}

const reducer = (state) => {
    state.value = 0
}
const store = new Redux(reducer)

const text = document.querySelector('#text')

text.value = store.getState().value

const subscribeListener = () => {
    text.value = store.getState().value
}
store.subscribe(subscribeListener)

document.querySelector('#add').addEventListener('click', e => {
    store.dispatch('value', store.getState().value + 1)
})
document.querySelector('#reduce').addEventListener('click', e => {
    store.dispatch('value', store.getState().value - 1)
})
document.querySelector('#off').addEventListener('click', e => {
    store.offSubscribe(subscribeListener)
})

<div>
	<input type="text" id="text" readonly>
</div>
<br>
<div>
    <button id="add">增加+</button>
    <button id="reduce">减少-</button>
</div>
<br>
<div>
    <button id="off"">取消订阅</button>
</div>