動(dòng)手實(shí)現(xiàn) redux

Barrior 發(fā)布于2019-08-21 17:18 / 564人閱讀

摘要：動(dòng)手實(shí)現(xiàn)實(shí)現(xiàn)這個(gè)模塊直接創(chuàng)建的函數(shù)考慮到要暴露出去的三個(gè)函數(shù)我們用函數(shù)內(nèi)部的變量來(lái)存儲(chǔ)我們的數(shù)據(jù)時(shí)候直接返回當(dāng)前的值就可以了同樣用內(nèi)部變量來(lái)存儲(chǔ)訂閱者訂閱者則由函數(shù)添加返回取消訂閱的函數(shù)。則根據(jù)返回新的同時(shí)通知訂閱者執(zhí)行相關(guān)邏輯。

文章地址

實(shí)例回顧

假如按鈕和界面不在同一組件, 經(jīng)常用 redux 去實(shí)現(xiàn)上面功能, 可以想象到如下代碼

    ...
    const Test = ({ colorTheme, authorName }) =>
        
            Hello World - { authorName }
        

    const mapStateToProps = state => ({
        colorTheme: state.colorTheme,
        authorName: state.authorName
    })

    ...

用過(guò) mapStateToProps 從頂層拿到屬性然后展示, 在另一個(gè)組建通過(guò) mapDispatchToProps 去觸發(fā) action 改變 state, 那么我們?nèi)绾巫约簩?shí)現(xiàn) redux 的功能呢

redux 屬性分析

關(guān)于我們常用到的內(nèi)容, 首先我們要考慮 createStore 方法, 使得可以創(chuàng)建出來(lái)我們后面要用到的 store , 可以接受 action 去處理改變 state, 并且去觸發(fā)其他事件，比如組建渲染。 Provider 組建，可以傳入一個(gè) store 向下分發(fā)我們的 store,使得子組建可以獲取到我們 store 內(nèi)的屬性和方法。一個(gè) connect 方法，使得子組建可以獲取到 store 里面的內(nèi)容, 并根據(jù) state 改變及時(shí)刷新渲染。

動(dòng)手實(shí)現(xiàn) redux 實(shí)現(xiàn) createStore

    export default reducer => {
        let state = null
        let listeners = []

        const subscribe = listener => {
            listeners.push(listener)
            return () => {
                listeners = listeners.filter(d => d !== listener)
            }
        }

        const getState = () => state

        const dispatch = action => {
            state = reducer(state, action)
            listeners.forEach(listener => listener())
        }

        dispatch()

        return { getState, dispatch, subscribe }
    }

這個(gè)模塊直接 export 創(chuàng)建 store 的函數(shù),考慮到要暴露出去的三個(gè)函數(shù), 我們用函數(shù)內(nèi)部的變量 state 來(lái)存儲(chǔ)我們的數(shù)據(jù), getState 時(shí)候直接返回當(dāng)前的值就可以了, 同樣用內(nèi)部變量 listeners 來(lái)存儲(chǔ)訂閱者, 訂閱者則由 dispatch 函數(shù)添加, 返回取消訂閱的函數(shù)。 dispatch 則根據(jù) action 返回新的 state 同時(shí)通知訂閱者執(zhí)行相關(guān)邏輯。最后返回包含這三個(gè)函數(shù)的對(duì)象。改對(duì)象接受 reducer 作為參數(shù), 內(nèi)部執(zhí)行一次 dispatch 則是為了初始化 state

實(shí)現(xiàn) reducer

    const initState = {
        ...
    }

    export default (state, action) => {

        if (!state) return initState

        switch (action.type) {
            ...
        }
    }

關(guān)于 reducer 則簡(jiǎn)單的實(shí)現(xiàn)了根據(jù)不同的 action, 返回不同的 state, 只是剛開(kāi)始判斷了如果沒(méi)有 state, 即初始化時(shí)候返回設(shè)置好的初始化值。

實(shí)現(xiàn) Provider

    class Provider extends Component {
        getChildContext () {
            return {
                store: this.props.store
            }
        }

        ...
    }

這里必須提一下 react 的 context 這個(gè)屬性, 可以讓我們不通過(guò) props 去獲取到上層組建的屬性, 不過(guò)關(guān)于寫(xiě)法卻有一些特殊的規(guī)定而且在后面的版本可能被移除, 具體信息可以參考Context. 我們用 context 把創(chuàng)建的 store 存入頂層組建中, 這樣就可以在后序組建中去獲取到相關(guān)內(nèi)容了。

實(shí)現(xiàn)connect

    const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
        class InnerComponent extends Component{
            constructor (props, context) {
                super(props)
                const { getState, dispatch, subscribe } = context.store

                this.state = {
                    ...props,
                    ...mapStateToProps(getState()),
                    ...mapDispatchToProps(dispatch)
                }

                subscribe(() => this._updateStore())
            }

            _updateStore  = () => {
                const { getState, dispatch } = this.context.store

                const allProps = {
                    ...this.props,
                    ...mapStateToProps(getState()),
                    ...mapDispatchToProps(dispatch)
                }

                this.setState({ ...allProps })
            }

            render () {
                return (
                    
                )
            }
        }

        InnerComponent.contextTypes = { store: PropTypes.object }

        return InnerComponent
    }

高階組件這個(gè)概念我們?cè)诠倬W(wǎng)上也可以看的到 Higher-Order Components, 簡(jiǎn)單理解就是傳入一個(gè)組件返回一個(gè)新的組件, 它內(nèi)部做什么事情則有你自己定義, 我們這里實(shí)現(xiàn) connect, 則也算是高階函數(shù)返回一個(gè)高階組件, 接受兩個(gè)函數(shù)作為參數(shù), mapStateToProps 和 mapDispatchToProps 看形參的名字就很熟悉, 我們分別傳入當(dāng)前的 state 和 dispatch 函數(shù), 得到的返回值則通過(guò) props 傳遞給入?yún)⒑瘮?shù), 內(nèi)部函數(shù)則通過(guò) context 獲取到頂部的 store, 同時(shí)用 subscribe
添加訂閱者每次更新 state 時(shí)候則重新渲染當(dāng)前組件。