Redux入門0x107: `react`集成`redux`精講

20171112 發(fā)布于2019-08-26 12:20 / 573人閱讀

摘要：這里的其實(shí)不需要自己寫，已經(jīng)有好的實(shí)現(xiàn)了引入修改組件完整源碼組件資源源碼

0x000 概述

前面雖然簡(jiǎn)單的講了如何在react中集成redux，但是那只是簡(jiǎn)單的講講而已，這一章將會(huì)仔細(xì)講講如何在react中使用reudx

0x001 問(wèn)題分析

查看前邊的栗子：

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"

//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// react
// // 組件
class App extends React.Component {
    constructor() {
        super()
        // 初始化 state
        this.state = {
            counter: 0
        }
        // 監(jiān)聽(tīng) store 變化, store 變化的時(shí)候更新 counter
        this.unSub=store.subscribe(() => {
            this.setState({
                counter: store.getState()
            })
        })
    }
    // 組件銷毀的時(shí)候取消訂閱
    componentWillUnmount(){
        this.unSub()
    }

    render() {
        return 
            {this.state.counter}
            
            
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

為了讓組件可以響應(yīng)redux的變化，我們寫了一些代碼：

    ....
    // 監(jiān)聽(tīng) store 變化, store 變化的時(shí)候更新 counter
    this.unSub=store.subscribe(() => {
        this.setState({
                counter: store.getState()
            })
        })
    ....
    // 組件銷毀的時(shí)候取消訂閱
    componentWillUnmount(){
        this.unSub()
    }

如果我們有大量的組件需要綁定redux，那么寫這些代碼就顯得非常冗余了
這一章要做的事就是優(yōu)化掉這個(gè)東西

0x002 connect方法

這里用了一個(gè)react的HOC，參數(shù)是一個(gè)組件，返回值也是一個(gè)組件，但是返回的組件被添加了一個(gè)props，也就是state。connect方法為每個(gè)組件添加了響應(yīng)store數(shù)據(jù)變化的能力，在store.dispatch調(diào)用的時(shí)候，會(huì)修改組件的props，讓組件重繪，從而達(dá)到react組件和redux綁定但是又不需要寫太多樣板代碼

connect

const connect = (WrappedComponent) => {
    return class Control extends React.Component {
        constructor() {
            super()
            this.state = {
                state: 0
            }
            this.unSub = store.subscribe(() => {
                this.setState({
                    state: store.getState()
                })
            })
        }

        componentWillUnmount() {
            this.unSub()
        }

        render() {
            return 
        }


    }
}

完整源碼

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"

//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

const connect = (WrappedComponent) => {
    return class Control extends React.Component {
        constructor() {
            super()
            this.state = {
                state: 0
            }
            this.unSub = store.subscribe(() => {
                this.setState({
                    state: store.getState()
                })
            })
        }

        componentWillUnmount() {
            this.unSub()
        }

        render() {
            return 
        }


    }
}
// 子組件
class SubCom extends React.Component {
    render(){
        return {this.props.state}
    }
}
// 包裹這個(gè)組件
let ReduxSubCom=connect(SubCom)

// react 組件
class App extends React.Component {
    constructor() {
        super()
    }

    render() {
        return 
            
            
            
        
    }
}
// 包裹組件
let ReduxApp = connect(App)

ReactDom.render(
    ,
    document.getElementById("app")
)

0x003 加強(qiáng)connect方法，消除訂閱整個(gè)state樹(shù)的影響

雖然已經(jīng)實(shí)現(xiàn)了將state和組件綁定，但是我們綁定的是整個(gè)state，如果state樹(shù)很大并且組件很多，那這個(gè)無(wú)畏的性能消耗太兇了。

修改redux結(jié)構(gòu)

const counter = (state = {counter: 0, num: 0}, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return {...state, ...{counter: ++state.counter}}
        case ACTION_DECREMENT:
            return {...state, ...{counter: --state.counter}}
        default:
            return state
    }
}

修改connect方法，返回一個(gè)函數(shù)，并修改props傳參：

const connect = (mapStateToProps) => {
    return (WrappedComponent) => class Control extends React.Component {
        constructor() {
            super()
            this.state = {
                state: {}
            }
            this.unSub = store.subscribe(() => {
                let state = mapStateToProps(store.getState())
                this.setState({
                    state: state
                })
            })
        }
        componentWillUnmount() {
            this.unSub()
        }
        render() {
            return 
        }
    }
}

修改APP組件中的props訪問(wèn)方式

class App extends React.Component {
    constructor() {
        super()
    }
    componentWillReceiveProps(nextProps) {
        console.log(nextProps)
    }
    render() {
        return 
            {this.props.counter}
            
            
        
    }
}

修改connect調(diào)用

let ReduxApp = connect((state) => {
    return {
        counter: state.counter
    }
})(App)

0x004: 加強(qiáng)connect，讓代碼中不再調(diào)用store.dispatch，不在依賴redux

修改connect方法，除了吧state映射到props上，也把dispatch給映射上去了，這樣組件就感受不到redux的存在了

const connect = (mapStateToProps, mapDispatchToProps) => {

    return (WrappedComponent) => class Control extends React.Component {
        constructor() {
            super()
            // 第一次初始化
            let props = mapStateToProps(store.getState())
            let actions = mapDispatchToProps(store.dispatch)
            this.state = {
                props: {...props,...actions}
            }

            this.unSub = store.subscribe(() => {
                // 變化的時(shí)候再次計(jì)算
                let props = mapStateToProps(store.getState())
                let actions = mapDispatchToProps(store.dispatch)
                this.setState({
                    props: {...props,...actions}
                })
            })
        }

        componentWillUnmount() {
            this.unSub()
        }

        render() {
            return 
        }
    }
}

修改connect調(diào)用，將dispatch映射到組件上

let ReduxApp = connect(
    (state) => {
        return {
            counter: state.counter
        }
    },
    (dispatch) => {
        return {
            increment: () => dispatch(increment()),
            decrement: () => dispatch(decrement()),
        }
    }
)(App)

修改App組件，不再使用store.dispatch，而是使用connect傳遞過(guò)來(lái)的dispatch，讓組件不依賴redux

class App extends React.Component {
    constructor(props) {
        super()
    }

    render() {
        const {counter,increment,decrement}=this.props
        return 
            {counter}
            
            
        
    }
}

完整源碼

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"

//reducer
const counter = (state = {counter: 0, num: 0}, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return {...state, ...{counter: ++state.counter}}
        case ACTION_DECREMENT:
            return {...state, ...{counter: --state.counter}}
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

const connect = (mapStateToProps, mapDispatchToProps) => {

    return (WrappedComponent) => class Control extends React.Component {
        constructor() {
            super()
            // 第一次初始化
            let props = mapStateToProps(store.getState())
            let actions = mapDispatchToProps(store.dispatch)
            this.state = {
                props: {...props,...actions}
            }

            this.unSub = store.subscribe(() => {
                // 變化的時(shí)候再次計(jì)算
                let props = mapStateToProps(store.getState())
                let actions = mapDispatchToProps(store.dispatch)
                this.setState({
                    props: {...props,...actions}
                })
            })
        }

        componentWillUnmount() {
            this.unSub()
        }

        render() {
            return 
        }
    }
}

// react 組件
class App extends React.Component {
    constructor(props) {
        super()
    }

    render() {
        const {counter,increment,decrement}=this.props
        return 
            {counter}
            
            
        
    }
}

let ReduxApp = connect(
    (state) => {
        return {
            counter: state.counter
        }
    },
    (dispatch) => {
        return {
            increment: () => dispatch(increment()),
            decrement: () => dispatch(decrement()),
        }
    }
)(App)

ReactDom.render(
    ,
    document.getElementById("app")
)

0x004 reat-redux

以上效果就和上一章的效果一致，是一個(gè)counter，在這里我們一步一步去除了樣板代碼，并將redux從組件中移除，如果只看App組件，根本感覺(jué)不到redux的存在，但redux又確實(shí)存在，如果有一天你要去掉redux，就可以做到不影響組件了。這里的connect其實(shí)不需要自己寫，已經(jīng)有好的實(shí)現(xiàn)了：react-redux

// 引入`react-redux`
import {Provider, connect} from "react-redux"
// 修改組件
ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

完整源碼

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"
import {Provider, connect} from "react-redux"
//reducer
const counter = (state = {counter: 0, num: 0}, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return {...state, ...{counter: ++state.counter}}
        case ACTION_DECREMENT:
            return {...state, ...{counter: --state.counter}}
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)


// react 組件
class App extends React.Component {
    constructor(props) {
        super()
    }

    render() {
        const {counter, increment, decrement} = this.props
        return 
            {counter}
            
            
        
    }
}

let ReduxApp = connect(
    (state) => {
        return {
            counter: state.counter
        }
    },
    (dispatch) => {
        return {
            increment: () => dispatch(increment()),
            decrement: () => dispatch(decrement()),
        }
    }
)(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

0x005 資源

源碼

云服務(wù)器 GPU云服務(wù)器 react-redux React_Redux_Appointm react-router-redux Redux

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108509.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

20171112

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

解決寶塔面板安裝后創(chuàng)建的網(wǎng)站打開(kāi)500錯(cuò)誤原因及解決辦法

閱讀 5088·2021-11-18 13:23
云主機(jī)用來(lái)做什么-云主機(jī)能做什么？

閱讀 1038·2021-09-22 15:24
計(jì)算機(jī)實(shí)戰(zhàn)項(xiàng)目之基于SSM醫(yī)療管理系統(tǒng)

閱讀 2081·2021-09-06 15:00
Apple 宣布與日本達(dá)成新的和解協(xié)議，允許開(kāi)發(fā)者鏈接到外部網(wǎng)站

閱讀 2775·2021-09-03 10:30
【??C語(yǔ)言函數(shù)傳參の結(jié)構(gòu)體數(shù)組篇??】

閱讀 1433·2021-09-02 15:15
CSS中左上朝向三角形(Top-Left Triangle)的幾種制作方式

閱讀 2232·2019-08-30 15:54
我的頁(yè)面我做主——瀏覽器去廣告正確姿勢(shì)

閱讀 3186·2019-08-30 15:44
前端學(xué)習(xí)路線

閱讀 1608·2019-08-29 15:12

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Redux入門0x107: `react`集成`redux`精講

相關(guān)文章

Redux入門0x106: `react`、`vue`、`原生 js`集成`redux`

**Router入門0x205: react-route + redux + react 集成**

Redux入門教程（快速上手）

前端學(xué)習(xí)資源

發(fā)表評(píng)論

0條評(píng)論

20171112

男|高級(jí)講師

TA的文章

解決寶塔面板安裝后創(chuàng)建的網(wǎng)站打開(kāi)500錯(cuò)誤原因及解決辦法

云主機(jī)用來(lái)做什么-云主機(jī)能做什么？

計(jì)算機(jī)實(shí)戰(zhàn)項(xiàng)目之基于SSM醫(yī)療管理系統(tǒng)

Apple 宣布與日本達(dá)成新的和解協(xié)議，允許開(kāi)發(fā)者鏈接到外部網(wǎng)站

【??C語(yǔ)言函數(shù)傳參の結(jié)構(gòu)體數(shù)組篇??】

CSS中左上朝向三角形(Top-Left Triangle)的幾種制作方式

我的頁(yè)面我做主——瀏覽器去廣告正確姿勢(shì)

前端學(xué)習(xí)路線

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Redux入門0x107: `react`集成`redux`精講

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！