成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Barrior / 575人閱讀

摘要：動手實(shí)現(xiàn)實(shí)現(xiàn)這個模塊直接創(chuàng)建的函數(shù)考慮到要暴露出去的三個函數(shù)我們用函數(shù)內(nèi)部的變量來存儲我們的數(shù)據(jù)時候直接返回當(dāng)前的值就可以了同樣用內(nèi)部變量來存儲訂閱者訂閱者則由函數(shù)添加返回取消訂閱的函數(shù)。則根據(jù)返回新的同時通知訂閱者執(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
    })

    ...

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

redux 屬性分析

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

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

這個模塊直接 export 創(chuàng)建 store 的函數(shù),考慮到要暴露出去的三個函數(shù), 我們用函數(shù)內(nèi)部的變量 state 來存儲我們的數(shù)據(jù), getState 時候直接返回當(dāng)前的值就可以了, 同樣用內(nèi)部變量 listeners 來存儲訂閱者, 訂閱者則由 dispatch 函數(shù)添加, 返回取消訂閱的函數(shù)。 dispatch 則根據(jù) action 返回新的 state 同時通知訂閱者執(zhí)行相關(guān)邏輯。最后返回包含這三個函數(shù)的對象。改對象接受 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 則簡單的實(shí)現(xiàn)了根據(jù)不同的 action, 返回不同的 state, 只是剛開始判斷了如果沒有 state, 即初始化時候返回設(shè)置好的初始化值。

實(shí)現(xiàn) Provider 
    class Provider extends Component {
        getChildContext () {
            return {
                store: this.props.store
            }
        }

        ...
    }

這里必須提一下 react 的 context 這個屬性, 可以讓我們不通過 props 去獲取到上層組建的屬性, 不過關(guān)于寫法卻有一些特殊的規(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
    }

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

至此我們的簡易得邏輯已經(jīng)實(shí)現(xiàn), 代碼github上有【reacts-ggsddu】, 大家可以下載本地運(yùn)行感受一下

參考

React.js 小書

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89365.html

相關(guān)文章

  • 動手實(shí)現(xiàn)一個最簡單的redux

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

    xiguadada 評論0 收藏0

  • 寫一本關(guān)于 React.js 的小書

    摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以來想總結(jié)一下自己關(guān)于的一些知識經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡單的入門級別的小書，提供給社區(qū)。本書的后續(xù)可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評論0 收藏0

  • 動手寫個React高階組件

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

    xiaokai 評論0 收藏0

  • redux中間件探秘

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

    Jeff 評論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    you_De 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<