安科网

Redux入门0x107: `react`集成`redux`精讲

taoweiquan00

taoweiquan00

2019-06-28

关注 关注

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 资源

react redux counter

taoweiquan00

taoweiquan00

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

俺好像看懂了公司前端代码

他掉着头发走来了。今天的重点是React或React Native如何高效管理调用后端接口，和上篇讲到Vue管理后端接口一样，它们有很多相似性，也有不同之处，因为我们知道它们开发模式和方法有些不同。而在Redux中主要有Reducer和Action，Re

opendigg 2020-06-02

React之React-redux数据流转流程

　　Redux与React这类库搭配起来更好用。　　react-redux能够让你的React组件从Redux store中很方便的读取数据，并且向store中分发action以此来更新数据。　　② Provider接收store作为props，然后通过c

weiqi 2020-04-29

React 入门（5）Redux

可以理解为全局数据状态管理工具，用来做组件通信等。当没有使用redux时兄弟组件间传值将很麻烦，代码很复杂冗余。使用redux定义全局单一的数据Store，可以自定义Store里面存放哪些数据，整个数据结构也是自己清楚的。

mjzhang 2020-04-16

2021适合移动和桌面应用的JavaScript框架是什么

当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领

游走的豚鼠君 2020-11-10

我在大厂写React学到了什么？性能优化篇

我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化，或者更好的代码组织。性能优化的重要性不用多说，谷歌发布的很多调研精确的展示了性能对于网站留存率的影响，而代码组织优化

81417707 2020-10-30

React应用程序配置TypeScript

最近在学习TypeScript的一些知识用到了 react,记录一下 react 创建应用项目和支持 TypeScript。React 是一个用于构建用户界面 UI 的 JavaScript 库,它的创建默认是不支持 TypeScript 的,本文使用的是

ctg 2020-10-14

2020年，JavaScript开发人员必备的5项高薪技能

开发人员的一生可以用两句话概括：计算器，以及学习新技能。成为开发人员绝非易事，他们是解决问题的人，也是不断学习的人。科技世界每天都在快速变化，如果你不想在这条快速变化的道路上落后，就必须不断学习新技能。不断升级，绝不止步。人们对React开发商的需求并未出

小飞侠V 2020-09-25

移动前端开发和Web前端开发的区别是什么？

前端这门技术，从诞生发展至今不过寥寥十余年。如果说前十年是 PC 前端的时代，那后十年一定是属于移动前端的时代。特别是随着网络制式的发展，移动设备在全球范围内得到了空前的普及，在前端领域，Hybird Web、React Native、Weex、Flutt

PncLogon 2020-09-24

8月份Github上热门的JavaScript开源项目排行

React是Facebook开发的用于构建用户界面的JavaScript库，现已为很多公司所用，因为它采用了一种不同的方式来构建应用：借助于React，开发者可以将应用分解为彼此解耦的独立组件，这样就可以独立维护并迭代各种组件了。Zettlr是一款非常适合

jipengx 2020-09-10

快速入门Web前端开发的正确姿势

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular

颤抖吧腿子 2020-09-04

移动APP开发有哪些框架？

现在比较流行的移动APP开发框架有以下六种：网页、混合、不仅、原生、桥接、自绘。前三种体验与Web的体验相似，后三种与原生APP的体验相似。这六种框架形式，都有自己适用的范围。无所谓好坏，适用就是好。自绘应用适用于游戏和有特殊效果的应用，最大的好处是没有平

wwzaqw 2020-09-04

为何React能成为2021年JavaScript优秀框架？

本文转载自公众号“读芯术”。要回答这个问题有点困难，在软件开发行业中有大量可用的语言和框架。JavaScript已经成为大多数开发流程的支柱，所以我想对三种基于JavaScript的框架进行比较，我选择的是Angular、React和Vue三种框架。Sta

maple00 2020-09-02

React Spectrum，Adobe的组件库和工具入门

React Spectrum是一个由Adobe开发的组件库和工具，可帮助你构建自适应，可访问且健壮的用户体验。帮助开发者使用React构建功能丰富的应用程序。React Spectrum是Adobe设计系统Spectrum的一个实现。React Aria

青蓝 2020-08-26

React实现阿里云OSS上传文件的示例

阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持容量和处理能力弹性扩展。钩子函数首先计算签名是否过期，如果

罗忠浩 2020-08-16

React组件开发中常见的陷阱

React作为使用最广泛Web前端开发之一，在Web开发领域越来成熟和稳固。其新版本发布的Hook API/concept使得组件更加便捷易用。虽然如此，React开发中仍然有很多的陷阱值得每一位React拥趸关注。在React中可以使用两种方法编组件函

liduote 2020-08-13

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ 2020-08-02

react兄弟组件传值

react中实现数据的共享可以通过react提供的Context组件，但是开发中经常有跨组件之间的事件传递。在vue中可以通过事件总线的方式。在react中可以借助第三方库来完成。这里推荐两个使用较多的库 pubsub-js 和 events 来完成对应的

pengruiyu 2020-08-01

React：虚拟DOM和diff算法

目的：为了实现页面元素的高效更新。

hyMiss 2020-07-27

2020年排名前10的Flutter和React Native UI库

如今，Flutter在移动技术中扮演着非常重要的角色。移动技术的选择已经变得非常关键，Flutter提高了生产率，Flutter已被许多公司采用。一些例子如阿里巴巴、谷歌等很多大公司都在提供世界级的flutter开发服务。React Native帮助我们借

wmd看海 2020-07-27

React Native pod install错误 SDK \"iphoneos\" cannot be located

给Xcode命令行工具指定路径。//查看所有可用sdk

孝平 2020-07-18
taoweiquan00

taoweiquan00

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号