假如按鈕和介面不在同一元件, 經常用redux去實現上面功能, 可以想象到如下**
...
const test = () =>
hello world -
const mapstatetoprops = state => ()
...
mapstatetoprops從頂層拿到屬性然後展示, 在另乙個組建通過mapdispatchtoprops去觸發action改變state, 那麼我們如何自己實現redux的功能呢
實現 createstore
export default reducer =>
}const getstate = () => state
const dispatch = action =>
dispatch()
return
}
export建立store的函式,考慮到要暴露出去的三個函式, 我們用函式內部的變數state來儲存我們的資料,getstate時候直接返回當前的值就可以了, 同樣用內部變數listeners來儲存訂閱者, 訂閱者則由dispatch函式新增, 返回取消訂閱的函式。dispatch則根據action返回新的state同時通知訂閱者執行相關邏輯。最後返回包含這三個函式的物件。改物件接受reducer作為引數, 內部執行一次dispatch則是為了初始化state實現 reducer
const initstate =
export default (state, action) =>
}
reducer則簡單的實現了根據不同的action, 返回不同的state, 只是剛開始判斷了如果沒有state, 即初始化時候返回設定好的初始化值。
實現 provider
class provider extends component
}...
}
class innercomponent extends component = context.store
this.state =
subscribe(() => this._updatestore())
}_updatestore = () => = this.context.store
const allprops =
this.setstate()
}render () />)}}
innercomponent.contexttypes =
return innercomponent
}高階元件這個概念我們在官網上也可以看的到 higher-order components, 簡單理解就是傳入乙個元件返回乙個新的元件, 它內部做什麼事情則有你自己定義, 我們這裡實現connect, 則也算是高階函式返回乙個高階元件, 接受兩個函式作為引數,mapstatetoprops和mapdispatchtoprops看形參的名字就很熟悉, 我們分別傳入當前的state和dispatch函式, 得到的返回值則通過props傳遞給入參函式, 內部函式則通過context獲取到頂部的store, 同時用subscribe
新增訂閱者每次更新state時候則重新渲染當前元件。
自己動手實現redux 一
訂閱事件，返回乙個取消訂閱函式 let subscribe cb let dispatch action return export default createstore 當我們使用redux時,首先需要使用redux的createstore並且傳入reducer來建立我們的store impor...
Redux 實現原理
以下白話一下個人理解 action 與外部的介面之一，可以理解為告知外部我都可以做些什麼，您有需要儘管吩咐。reducer 對應action所需要做的事情，當然一般來說只是計算得出新的state store 與外部互動的物件，直接提供state，響應action，管理訂閱者 function cre...
Redux原始碼學習篇 一 redux實現
本文會逐步探索redux到應用分為3個系列 redux 實現 react redux 實現 redux中介軟體的應用與實現 案例場景 現在有乙個計數器，或者點讚場景 現在用redux如何記錄呢?import from redux action const like like const unlike...