React与Redux整合技术简介

idealcn 发布于2019-08-22 17:20 / 3067人阅读

摘要：展示组件与容器组件的绑定库的基本开发思想是展示组件与容器组件相分离。技术上讲，容器组件就是使用从树中读取部分数据，并通过来把这些数据提供给要渲染的组件。

说明：阅读本篇文章需要对Redux有一定的了解，对Redux不了解的同学可先看看这篇文章Redux技术架构简介（一）

1. React中引入react-redux

为了让Redux和React更好的配合，Facebook专门开发了一个npm包--react-redux，可以这样引入你的项目：
npm install --save react-redux
当然不引用也完全可以（Redux包是必须要引用的），只不过会增加一些开发量，还会带来一些额外的性能开销。

2. 展示组件与容器组件

Redux的React绑定库的基本开发思想是展示组件与容器组件相分离。展示组件只负责页面呈现，不处理数据，不维护状态；容器组件负责页面的运行逻辑，获取展示组件中的消息，处理内部数据，更新状态等。

3. 展示组件的实现

React引入redux后，应用中只有单一的state树，react的每个组件都可以抛弃state的相关逻辑，改为从props获取，包括要执行的一些用户事件行为。
引入redux后的react组件变为：

class MainContent extends React.Component{
    constructor(props){
        super(props);
        this.sortResult = this.sortResult.bind(this);
        this.showSlider = this.showSlider.bind(this);
    }
    sortResult(data){
        this.props.setPhoto(data);
    }
    showSlider(index){
        this.props.showSlider(index);
    }
    componentDidMount () {
        this.props.fetchPosts();
    }
    render(){
        let {isFetching, isValidate} = this.props;
        let sliderNode = null;
        if(this.props.photo.length){
            sliderNode = ;
        }
        return (
               
                
                
                
                {sliderNode}
            
        );
    }
};

可以看到，MainContent组件除了展示外，几乎没有任何的逻辑处理（subscribe和dispatch的逻辑都放到了容器组件），所有的数据都是通过this.props从父组件中获取。

4. 容器组件的实现

容器组件实现了将展示组件和redux关联在一起。技术上讲，容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。建议每个展示组件对应一个容器组件，这样可以很清晰的找到映射关系。

mapStateToProps函数

从名字上可以看出，这个函数实现了从state（reducer中定义的）到展示组件props 的映射。示例代码如下：

const mapStateToProps = (state, ownProps) => {
    return {
        photo : state.photomainReducer.photoData,
        video : state.photomainReducer.videoData,
        isFetching : state.photomainReducer.isFetching,
        isValidate : state.photomainReducer.isValidate
    }
}

传入的state是应用中唯一的状态树，我们从相应组件的reducer中读取state，分别映射到一个自定义属性中，这样就可以在展示组件中直接调用对应属性（props）了。
mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

mapDispatchToProps函数

同样我们也可以猜到，这个函数的作用是将期望执行的dispatch方法的返回值映射到展示组件的props上。示例代码如下：

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        slider:(data) => dispatch(photomainAction.showSlider(data))
    }
}

比如我们想dispatch一个showSlider的action，通过这个方法映射之后，就可以直接这样写：

this.props.slider(data)

即mapDispatchToProps封装了dispatch方法。此外，还可以通过redux提供的bindActionCreators函数进一步封装，上面的代码可以改写如下：

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
        slider:photomainAction.showSlider
    },dispatch);
}

如果import时的action名和你想定义的属性名一样，甚至还可以简化：

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({slider},dispatch);
}

connect函数

上面2个方法实现了state和action到props的映射，我们还需要把这2个函数连接在一起，并且要关联到一个具体的展示组件，这样就可以在展示组件中使用这种映射关系了。示例代码如下：

const PhotomainContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Photomain);

其中，Photomain是一个展示组件。
每一个容器组件都包含一个对应的展示组件，我们可以把这些容器组件当做一个普通的react组件进行组合，整合的最后一步就是如何把store传入到每个组件中。

5. 传入Store

Store保存了整个应用的单一状态树，所有容器组件都需要从store中读取，我们可以store作为属性传递给每个组件，子组件通过props获取，但是如果嵌套过深，写起来会很麻烦。还好，react-redux提供一个叫provider的组件，他可以让所有组件都可以访问到store（他的实现原理实际上是利用了react的context功能），而不必显示的一层层传递了。

ReactDOM.render(
    
        
    ,
    $(".main-wrap")[0]
);

有一点要注意，provider内的组件只能有一个，所以需要将所有组件先封装成一个组件再用provider包裹起来。

6. 总结

Redux的引入使React彻底脱离了对数据状态的管理，可以让React更专注于View的展现，实际上这也是react善于做的事情。多带带看react，我们甚至感觉不到redux的存在，使逻辑层和视图层更加清晰（redux负责逻辑，react负责视图），当然一部分原因要归功于react-redux包做了很好的封装。

以上就是React与Redux整合的简单实现。

参考

Redux 中文文档
Redux 入门教程-阮一峰

GPU云服务器云服务器 react-redux React_Redux_Appointm react-router-redux 技术整合

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95077.html

Redux概念之一: Redux简介

摘要：应用这说明并不是单指设计给用的，它是独立的一个函数库，可通用于各种应用。在数据流的最后，要触发最上层组件的，然后进行整体的重新渲染工作。单纯在的对象上是没有办法使用，要靠额外的函数库才能这样作，这是一定要使用类似像这种函数库的主要原因。 Redux的官网中用一句话来说明Redux是什么: Redux是针对JavaScript应用的可预测状态容器这句话虽然简短，其实是有几个涵义的: ...

cjie 2019-08-20 13:59 评论0 收藏0
Redux技术架构简介（二）-- 异步实现

摘要：异步实现设计需要增加三种通知异步请求发起的异步请求成功的异步请求失败的示例代码如下返回参数完全可以自定义。这种分别在请求开始前，请求成功后，请求失败后发送。表示数据的有效性，他的作用是在异步请求发送失败后，告诉当前的数据是过时的数据。说明：对Redux不了解的同学可先看看这篇文章Redux技术架构简介（一）前言这里说的Redux异步实现，是专指Redux中的异步Action实现，...

wuaiqiu 2019-08-22 17:20 评论0 收藏0
【全栈React】React 30天教程索引

摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 评论0 收藏0
Redux技术架构简介

摘要：是一个程序架构，源于提出的一种架构，然而，它不仅可以应用于，还可以应用于其他任何框架中。有以下职责维持应用的提供方法获取提供方法更新通过注册监听器通过返回的函数注销监听器。同时，的返回值实际上是一个函数可以解除监听。 Redux是一个程序架构，源于Flux（Facebook提出的一种架构），然而，它不仅可以应用于React，还可以应用于其他任何框架中。值得一提的是，Redux的源代码很...

weizx 2019-08-22 17:05 评论0 收藏0
Taro 简介

摘要：让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来，就伴随着赞誉与争议不断。同时于开发者来说，小程序的生态不断在完善，许多的坑已被踩平，虽然还是存在一些令人诟病的问题，但已经足见微信的诚意了。 Taro 介绍在互联网不断发展的今天，前端程序员们也不断面临着新的挑战，在这个变化多端、不断革新自己的领域，每一年都有新的美好事物在发生。从去年微信小程序的诞生，到今年的逐渐火热，以及...

sixgo 2019-08-23 16:18 评论0 收藏0