Redux入門0x107: `react`整合`redux`精講

阿新 • • 發佈：2018-12-11

0x000 概述

前面雖然簡單的講了如何在react中整合redux，但是那只是簡單的講講而已，這一章將會仔細講講如何在react中使用reudx

0x001 問題分析

檢視前邊的栗子：

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
        }
        // 監聽 store 變化, store 變化的時候更新 counter
        this.unSub=store.subscribe(() => {
            this.setState({
                counter: store.getState()
            })
        })
    }
    // 元件銷燬的時候取消訂閱
    componentWillUnmount(){
        this.unSub()
    }

    render() {
        return <div>
            <p>{this.state.counter}</p>
            <button
                onClick={() => {
                    store.dispatch(increment())
                }}>+
            </button>
            <button
                onClick={() => {
                    store.dispatch(decrement())
                }}>-
            </button>
        </div>
    }
}

ReactDom.render(
    <App/>,
    document.getElementById('app')
)

為了讓元件可以響應redux的變化，我們寫了一些程式碼：

    ....
    // 監聽 store 變化, store 變化的時候更新 counter
    this.unSub=store.subscribe(() => {
        this.setState({
                counter: store.getState()
            })
        })
    ....
    // 元件銷燬的時候取消訂閱
    componentWillUnmount(){
        this.unSub()
    }

如果我們有大量的元件需要繫結redux

，那麼寫這些程式碼就顯得非常冗餘了這一章要做的事就是優化掉這個東西

0x002 `connect`方法

這裡用了一個react的HOC，引數是一個元件，返回值也是一個元件，但是返回的元件被添加了一個props，也就是state。connect方法為每個元件添加了響應store資料變化的能力，在store.dispatch呼叫的時候，會修改元件的props，讓元件重繪，從而達到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 <WrappedComponent state={this.state.state}/>
        }


    }
}

完整原始碼

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 <WrappedComponent state={this.state.state}/>
        }


    }
}
// 子元件
class SubCom extends React.Component {
    render(){
        return <p>{this.props.state}</p>
    }
}
// 包裹這個元件
let ReduxSubCom=connect(SubCom)

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

    render() {
        return <div>
            <ReduxSubCom/>
            <button
                onClick={() => {
                    store.dispatch(increment())
                }}>+
            </button>
            <button
                onClick={() => {
                    store.dispatch(decrement())
                }}>-
            </button>
        </div>
    }
}
// 包裹元件
let ReduxApp = connect(App)

ReactDom.render(
    <ReduxApp/>,
    document.getElementById('app')
)

0x003 加強`connect`方法，消除訂閱整個`state`樹的影響

雖然已經實現了將state和元件繫結，但是我們繫結的是整個state，如果state樹很大並且元件很多，那這個無畏的效能消耗太凶了。

修改redux結構

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方法，返回一個函式，並修改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 <WrappedComponent {...this.state.state}/>
        }
    }
}

修改APP元件中的props訪問方式

class App extends React.Component {
    constructor() {
        super()
    }
    componentWillReceiveProps(nextProps) {
        console.log(nextProps)
    }
    render() {
        return <div>
            <p>{this.props.counter}</p>
            <button
                onClick={() => {
                    store.dispatch(increment())
                }}>+
            </button>
            <button
                onClick={() => {
                    store.dispatch(decrement())
                }}>-
            </button>
        </div>
    }
}

修改connect呼叫

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

0x004: 加強`connect`，讓程式碼中不再呼叫`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(() => {
                // 變化的時候再次計算
                let props = mapStateToProps(store.getState())
                let actions = mapDispatchToProps(store.dispatch)
                this.setState({
                    props: {...props,...actions}
                })
            })
        }

        componentWillUnmount() {
            this.unSub()
        }

        render() {
            return <WrappedComponent {...this.state.props}/>
        }
    }
}

修改connect呼叫，將dispatch對映到元件上

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

修改App元件，不再使用store.dispatch，而是使用connect傳遞過來的dispatch，讓元件不依賴redux

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

    render() {
        const {counter,increment,decrement}=this.props
        return <div>
            <p>{counter}</p>
            <button
                onClick={increment}>+
            </button>
            <button
                onClick={decrement}>-
            </button>
        </div>
    }
}

完整原始碼

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(() => {
                // 變化的時候再次計算
                let props = mapStateToProps(store.getState())
                let actions = mapDispatchToProps(store.dispatch)
                this.setState({
                    props: {...props,...actions}
                })
            })
        }

        componentWillUnmount() {
            this.unSub()
        }

        render() {
            return <WrappedComponent {...this.state.props}/>
        }
    }
}

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

    render() {
        const {counter,increment,decrement}=this.props
        return <div>
            <p>{counter}</p>
            <button
                onClick={increment}>+
            </button>
            <button
                onClick={decrement}>-
            </button>
        </div>
    }
}

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

ReactDom.render(
    <ReduxApp/>,
    document.getElementById('app')
)

0x004 `reat-redux`

以上效果就和上一章的效果一致，是一個counter，在這裡我們一步一步去除了樣板程式碼，並將redux從元件中移除，如果只看App元件，根本感覺不到redux的存在，但redux又確實存在，如果有一天你要去掉redux，就可以做到不影響元件了。這裡的connect其實不需要自己寫，已經有好的實現了：react-redux

// 引入`react-redux`
import {Provider, connect} from 'react-redux'
// 修改元件
ReactDom.render(
    <Provider store={store}>
        <ReduxApp/>
    </Provider>,
    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 <div>
            <p>{counter}</p>
            <button
                onClick={increment}>+
            </button>
            <button
                onClick={decrement}>-
            </button>
        </div>
    }
}

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

ReactDom.render(
    <Provider store={store}>
        <ReduxApp/>
    </Provider>,
    document.getElementById('app')
)

0x005 資源

原始碼

Redux入門0x107: `react`整合`redux`精講

0x000 概述前面雖然簡單的講了如何在react中整合redux，但是那只是簡單的講講而已，這一章將會仔細講講如何在react中使用reudx 0x001 問題分析檢視前邊的栗子： import {createStore} from 'redux' impor

Redux入門0x106: `react`、`vue`、`原生 js`整合`redux`

0x000 概述之前寫的所有關於redux的文章都是純粹的redux，是和框架無關、環境無關的redux，所以我沒有將redux和react一起講，為的是吧redux和react分開，作為獨立的個體來分析，redux提現的是一種思想，而不是一個思維定式。而現在我們

[Android] React Native技術精講與高質量上線APP開發多棧技術

【多棧技術更有競爭力】本課程將手把手帶你用RN技術開發、優化、直到最後釋出上線一款完整的跨平臺APP；讓你擁有一次真正參與上線專案開發的歷程，同時全面掌握React Native技術，使你的技術能力和專案經驗都得到前所未有的提升！ https://pan.baidu.com/s/1p4c

React高階元件精講

一、基本概念高階函式是以函式為引數，並且返回也是函式的的函式。類似的，高階元件（簡稱HOC）接收 React 元件為引數，並且返回一個新的React元件。高階元件本質也是一個函式，並不是一個元件。高階元件的函式形式如下： const EnhanceComponen

React Router V4 精講

一、前端路由和後端路由 1)後端路由多頁應用中，一個URL對應一個HTML頁面，一個Web應用包含很多HTML頁面，在多頁應用中，頁面路由控制由伺服器端負責，這種路由方式稱為後端路由。多頁應用中,每次頁面切換都需要向伺服器傳送一次請求，頁面使用到的靜態資源也需要

ReactNative之Redux入門（3）- redux入門

注：本教程針對於有過React/ReactNative開發經驗的人群。參閱文件和阮一峰老師的網路日誌進行學習。可能在第一節的學習中對Redux的基本概念看完之後都不瞭解。現在呢再寫完Demo後再看一遍，將會恍然大悟。摘抄並簡單介紹Redux的基本概念工作原理。1.storeS

Redux 入門教程（三）：React-Redux 的用法

建立 www counter reducer creates 所有 port 操作 lin 作者：阮一峰前兩篇教程介紹了 Redux 的基本用法和異步操作，今天是最後一部分，介紹如何在 React 項目中使用 Redux。為了方便使用，Redux 的作者封裝

看了就學會之React redux入門示例

本篇文章主要介紹了react redux入門示例，現在分享給大家，也給大家做個參考。如有不足之處，歡迎批評指正。環境準備為了方便，這裡使用create-react-app搭建react環境 create-react-app mydemo 彈出配置如果需要自定義react的配置，需要執行下面的命令

react navigation返回到任意頁面(不整合redux)

react navigation預設是使用key作為goback的引數進行返回的，這個key是一個動態生成的，而不是我們定義的routeName。網上也有很多方法有的說更改原始碼，有的說是整合redux。更改原始碼的方式我也嘗試過但是如果開啟滑動返回屬性，很

React Native入門篇—redux react-redux react-navigation-redux-helpers的安裝和配置

注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs/getting-started/ redux官方文件：https://www.redux.org.cn/ 專案地址GitHub地址：https:/

React Native整合Redux框架講解與應用

學過React Native的都知道，RN的UI是根據相應元件的state進行render的，而頁面又是由大大小小的元件構成，導致每個元件都必須維護自身的一套狀態，因此當頁面複雜化的時候，管理state會相當吃力的。而redux提供了一套機制來組織管理整

【React全家桶入門之十三】Redux中介軟體與非同步action

在上一篇中我們瞭解到，更新Redux中狀態的流程是這樣的：action -> reducer -> new state。文中也講到，action是一個普通的javascript物件、reducer是一個普通的方法，在reducer中根據當前的st

React Native整合Redux

學了一段時間React-Native，開始學習別人的專案，發現用到了Redux，幾經搜尋，大多都是講Redux框架的歷史，起源，如何牛逼，分析架構，舉栗子，怎麼用，卻沒有說怎麼配置，下面這篇文章講解的

分針網——IT教育：說一說 React 和 Redux 你知道或者不知道的一些事情

React Redux 本文介紹一下自己在使用React和Redux過程中的一些思考，主要面向初學者。 1. 為什麽要有redux 傳統前端開發中，把模板和功能邏輯分開作為

react之redux的學習筆記

reac http npm 狀態 flux 比較 ins install sta 主流的數據框架：Flux （單向數據量，比較重大，實用性不強） reFlux redux（簡單單一狀態樹） mvc model: 數據 view: 顯示 controller: 管理（act

Redux 入門教程

ref tutorial mod html .com opera 異步 6.0 part Redux 入門教程（三）：React-Redux 的用法（[email protected]/* */） Redux 入門教程（二）：中間件與異步操作（[email

mirror.js 整合redux的好工具

tmp sync model them lis tools devtools floor version mirror.js 很簡單，讓state管理更方便了，沒有新增api，值得使用 https://github.com/yurizhang/mirror

45.使用webpack,react，redux搭倆個界面

ebp logger tags main you end reac Redux ade 整理好寫 { "private": true, "version": "0.0.1", "desc

[React] Configure a React & Redux Application For Production Deployment and Deploy to Now

hang scrip app class pack pub relative pts als In this lesson, we’ll make a few small changes to our scripts and add some environme

redux入門二

patch htm pat www. 一個 isp 用戶 src tor 在redux中用戶的操作並不會直接導致view層的更新，而是view層發出actions通知出發store裏的reducer從而來更新state。 Action就像一個指揮者，告訴我們應該做哪些事，

Redux入門0x107: `react`整合`redux`精講

0x000 概述

0x001 問題分析

0x002 connect方法

0x003 加強connect方法，消除訂閱整個state樹的影響

0x004: 加強connect，讓程式碼中不再呼叫store.dispatch，不在依賴redux

0x004 reat-redux

0x005 資源

相關推薦

0x002 `connect`方法

0x003 加強`connect`方法，消除訂閱整個`state`樹的影響

0x004: 加強`connect`，讓程式碼中不再呼叫`store.dispatch`，不在依賴`redux`

0x004 `reat-redux`