動手實現 redux

Barrior 發布于2019-08-21 17:18 / 574人閱讀

摘要：動手實現實現這個模塊直接創建的函數考慮到要暴露出去的三個函數我們用函數內部的變量來存儲我們的數據時候直接返回當前的值就可以了同樣用內部變量來存儲訂閱者訂閱者則由函數添加返回取消訂閱的函數。則根據返回新的同時通知訂閱者執行相關邏輯。

文章地址

實例回顧

假如按鈕和界面不在同一組件, 經常用 redux 去實現上面功能, 可以想象到如下代碼

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

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

    ...

用過 mapStateToProps 從頂層拿到屬性然后展示, 在另一個組建通過 mapDispatchToProps 去觸發 action 改變 state, 那么我們如何自己實現 redux 的功能呢

redux 屬性分析

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

動手實現 redux 實現 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 }
    }

這個模塊直接 export 創建 store 的函數,考慮到要暴露出去的三個函數, 我們用函數內部的變量 state 來存儲我們的數據, getState 時候直接返回當前的值就可以了, 同樣用內部變量 listeners 來存儲訂閱者, 訂閱者則由 dispatch 函數添加, 返回取消訂閱的函數。 dispatch 則根據 action 返回新的 state 同時通知訂閱者執行相關邏輯。最后返回包含這三個函數的對象。改對象接受 reducer 作為參數, 內部執行一次 dispatch 則是為了初始化 state

實現 reducer

    const initState = {
        ...
    }

    export default (state, action) => {

        if (!state) return initState

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

關于 reducer 則簡單的實現了根據不同的 action, 返回不同的 state, 只是剛開始判斷了如果沒有 state, 即初始化時候返回設置好的初始化值。

實現 Provider

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

        ...
    }

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

實現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
    }

高階組件這個概念我們在官網上也可以看的到 Higher-Order Components, 簡單理解就是傳入一個組件返回一個新的組件, 它內部做什么事情則有你自己定義, 我們這里實現 connect, 則也算是高階函數返回一個高階組件, 接受兩個函數作為參數, mapStateToProps 和 mapDispatchToProps 看形參的名字就很熟悉, 我們分別傳入當前的 state 和 dispatch 函數, 得到的返回值則通過 props 傳遞給入參函數, 內部函數則通過 context 獲取到頂部的 store, 同時用 subscribe
添加訂閱者每次更新 state 時候則重新渲染當前組件。

至此我們的簡易得邏輯已經實現, 代碼github上有【reacts-ggsddu】, 大家可以下載本地運行感受一下

參考

React.js 小書

GPU云服務器云服務器 Redux redux源碼自己動手寫爬蟲動手學習深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89365.html

動手實現一個最簡單的redux

摘要：原文地址的主要集中在函數返回值中，以下這個迷你的只簡單實現方法，如下測試代碼運行結果原文地址：https://github.com/huruji/blog/issues/1 redux的主要API集中在createStore函數返回值中，以下這個迷你的redux只簡單實現createStore、dispatch、subscribe、getState方法，如下： const creat...

xiguadada 2019-08-22 10:54 評論0 收藏0
寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
動手寫個React高階組件

摘要：作用是給組件增減屬性。如果你的高階組件不需要帶參數，這樣寫也是很的。那么需要建立一個引用可以對被裝飾的組件做羞羞的事情了，注意在多個高階組件裝飾同一個組件的情況下，此法并不奏效。你拿到的是上一個高階組件的函數中臨時生成的組件。是什么簡稱HOC，全稱 High Order Component。作用是給react組件增減props屬性。怎么用為什么不先說怎么寫？恩，因為你其實已經用...

xiaokai 2019-08-22 18:14 評論0 收藏0
redux中間件探秘

摘要：接下來我們來看看源碼中的模塊是怎么應用中間件的。如何實現中間件操作的。新的會從第一個中間件開始觸發，這樣，在我們調用的時候，就會將中間件走一遍了。函數如果存在多個中間件，直接使用方法將各個中間件嵌套起來。從redux-thunk引出思考在使用redux-thunk進行異步action書寫的時候，我經常好奇redux到底如何運作，讓asyncAction成為可能為了探究，我們必須看...

Jeff 2019-08-20 18:26 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0