React进阶(6)-react-redux的使用

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

React进阶(6)-react-redux的使用_第1张图片

撰文 | 川川

VX-ID:suibichuanji

点击文末左下方阅读原文,可看视频内容

前言

撰文:川川

您将在本文当中学习到

  • react-redux是什么,解决什么问题

  • UI组件以及容器组件

  • react-redux中两个重要的API,Provider以及connect

  • mapStateToProps以及mapDispatchToProps等的学习

是不是搞不清楚React与Redux,以及React-Redux的关系?是不是不清楚mapStateToProps以及mapDispatchToProps的使用?

那么本文就是你想要知道的

·  正  ·  文  ·  来  ·  啦  ·

react-redux是什么?

以下是上节内容的代码结构,完成的一个todolist,并对Redux进行了拆分,按功能模块化管理

├─.gitignore
├─package-lock.json
├─package.json
├─README.md
├─yarn-error.log
├─yarn.lock
├─src                              // 源代码主要目录
|  ├─index.js                   // 入口文件
|  ├─views                      // 视图
|  |   └TodoList.js            
|  ├─store                    // Redux中store组件的公共数据状态
|  |   ├─actionCreators.js   // action创建者
|  |   ├─actionTypes.js       // actionTypes的类型,定义成常量
|  |   ├─index.js                 // 创建store的主文件
|  |   └reducer.js                // 创建的reducer
|  ├─components             // UI组件
|  |     └TodoListUI.js
├─public
|   ├─favicon.ico
|   ├─index.html
|   └manifest.json

Redux:是一个用于管理组件公共状态的一个可预测状态的框架,集中管理组件的状态.核心在于store,它提供了dispatch,getState,subscribe方法,理解Redux的工作流程很重要

React进阶(6)-react-redux的使用_第2张图片

react-redux: 它是redux作者封装的一个库,是一个第三方的模块,对Redux进一步的封装简化,提供了一些额外的API(例如:Provider,connect等),使用它可以更好的组织和管理我们的代码,遵循一定的组件拆分规范,在React中更方便的使用Redux

关系: 它不是必须的,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己,项目组成员的熟悉程度,适合自己的才是最好的,使用后者提供了一些便利,但需要额外的掌握一些API的使用

如果只是使用Redux,那么流程是这样的:

  • component-->dispatch(action)-->reducer-->subscribe-->getState-->component 这在前几篇的内容,一直都是遵循这个流程

如果使用react-redux,那么流程是这样的:

  • component-->actionCreator(data)-->reducer-->component

在上几节内容中,我们将todolist的组件进行了拆分,拆分成UI组件(无状态组件)和容器组件,将Reudcer按照各个职责进行管理

虽然已经做了简化,但是想更进一步更好的组织我们的代码,那么可以使用react-redux,当你使用了它之后,你不需要手动的写dispatch,subscribe,以及getState了

因为它对内输入的逻辑(即外部的数据(即state对象)如何转换为 UI 组件的参数,通过mapStateToProps),对外输出逻辑(即用户发出的动作如何变为 Action 对象,从 UI 组件传出去,通过mapDispatchToProps)

react-redux帮我们做了监听,获取state等工作,同时它提供了两个好用的API,Provider和connect,在下文中我们会学习到的

(面对疫情,安全意识还是要有的)

安装react-redux

既然是一个第三方的模块,那么可以通过npm或者yarn的方式下载

npm install --save react-redux
或
yarn add react-redux

安装完成后,可以在根目录的package.json中查看是否有的

对于理解 react-redux中的 Provider和 connect,有必要再次回顾一下之前学过的UI组件和容器组件

UI组件(傻瓜组件/无状态组件)

既然是一个第三方的模块,那么可以通过npm或者yarn的方式下载

react-redux将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)

UI 组件有以下几个特征

  • 只负责 UI 的呈现,不带有任何业务逻辑,

  • 没有状态,UI的渲染通过外部的props传入(即不使用this.state这个变量)

  • 所有数据都由参数(this.props)对象提供

  • 不使用任何 Redux 的 API

如下所示, UI 组件的例子

const Counter = num => 

{ num }

;

因为不含有状态state,UI 组件又称为"纯组件",即它纯函数一样,输出的结果纯粹由参数决定它的值,给定的输入,便会有指定的输出,与UI = render(data)完全吻合

容器组件(聪明组件)

容器组件的特征与UI组件相反

  • 负责管理数据和业务逻辑,不负责 UI 的呈现

  • 带有内部状态(state)

  • 使用 Redux 的 API(下面会有具体的例子),比如:dispatch,getState,subscribe等

总之:UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。

如果一个组件既有 UI 又有业务逻辑,那怎么办?可以将它拆分成下面的结构:外面是一个容器组件,里面包了一个UI 组件。前者负责与外部的通信,将数据传给后者,由后者渲染出视图。

这也是之前我们将todolist组件进行了容器组件和UI组件不断的拆分的方式.当然这种拆分因人而异,没有绝对的,太细粒度的拆分也会带来管理上的麻烦.不能为了拆分而拆分.

而 react-redux规定,所有的 UI 组件都由用户提供,容器组件则是由 react-redux自动生成(下面的connect方法返回的结果就是容器组件)。也就是说,用户负责视觉层,状态管理则是全部交给它

Provider

作用:它是一个组件,用于连接了Store,它把store提供给内部组件,接受store作为props,然后通过context往下传,这样react中任何组件都可以通过context获取store

只要被这个 Provider组件包裹了,那么它内部的子组件就有能力接收到store,内部的组件都有能力获取store的数据的

这样也就意味着我们可以在任何一个组件里利用 dispatch(action)来触发 reducer改变 state,并用 subscribe监听 state的变化,然后通过 getState来获取变化后的值。但是官方并不推荐这样做,它只会让数据流变的混乱,过度的耦合也会影响组件的复用,维护起来会更麻烦

Provider其实是对Redux中的store的subscribe,dispatch,getState的一个封装,集成.它对外暴露props属性,内部却已经帮我们实现了的 react-redux提供 Provider组件,可以让容器组件拿到state 例如如下代码:

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from "react-redux";  // 从react-redux库中引入Provider
import store from './store'                      // 引入store






const container = document.getElementById('root');


ReactDOM.render(
         // 通过属性props的方式将store赋值给store,这样Provider组件就能接收到store中的数据,其内部的组件也可以拿到store中的状态
        
    ,
    container);

如果为了代码更好看点,也可以这样,定义一个变量的,以下这种写法与上面是等价的,JSX的内容可以看以前的内容

const App = (
    
        
    
)


const container = document.getElementById('root');
ReactDOM.render(App,container);

这里需要注意的是:当你使用React-Router 路由库时,与其他项目没有不同之处,也是使用ProviderRouter外面包一层,因为Provider的唯一功能就是传入store对象
如果不这样包裹着:内部的组件时接收不到store中的状态数据的,如下所示

 
    
      
    
  

connect

作用:connect顾名思义,是一个连接器,它是连接容器组件和UI(傻瓜)组件的,它是 react-redux提供的一个方法,用于从 UI 组件生成容器组件,把两种组件给连接起来

connect方法接收四个参数,一个是 mapStateToProps,另一个是 mapDispatchToProps,当然还有两个参数: mergeProps, options,它们是可选的,它执行的结果依然是一个函数,所以才可以在后面在加上一个圆括号的,而圆括号内又接收一个参数,即是UI组件,也是傻瓜组件

有两次 connect的执行,第一次 connect函数的执行是从react-redux库中引入这个方法,第二次是把 connect函数返回的函数再次执行,最后产生的就是容器组件,如下代码所示

import { connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);  // 命名成ContainerTodoList也是一样的

如果不给connect传递任何参数,可以为空,也可以指定参数null,或者只有mapStateToProps,没有mapDispatchToProps,这也是没有什么问题的,如下代码所示

import { connect } from 'react-redux'
const VisibleTodoList = connect(mapStateToProps,null)(TodoList);

在上面代码中,TodoList就是 UI 组件,而VisibleTodoList就是由 React-Redux通过connect方法自动生成的容器组件。

但是,因为没有定义业务逻辑,上面这个容器组件毫无意义,只是 UI 组件的一个单纯的包装层。为了定义业务逻辑,需要给出下面两方面的信息。

  1. 输入逻辑:外部的数据(即state对象)如何转换为 UI 组件的参数(负责接收state)

  2. 输出逻辑:用户发出的动作如何变为 Action 对象,从 UI 组件传出去(负责派发动作dispatch方法)


所以,connect的两个API如下所示:

import { connect } from 'react-redux'
const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps,mergeProps, options)(TodoList);  // 命名成ContainerTodoList也是一样的

在上面代码中,connect方法接受四个参数:分别是 mapStateToProps和 mapDispatchToProps,后面两个参数 mergeProps,以及 options可以省略,这四个参数的名字可以是任意的,并不一定非得这样叫,也可以定义为 mapState或者 mapDispatch,只是这样命名,见名知意,已经是约定俗成的一个习惯

它们定义了 UI 组件的业务逻辑。前者负责输入逻辑(mapStateToProps),即将state映射到 UI 组件的参数(props),后者负责输出逻辑(mapDispatchToProps),即将用户对 UI 组件的操作映射成 Action

综归来说, connect做了两件事情:

  • 把store上的状态转换为内层的UI组件(傻瓜组件)的props

  • 把内层UI组件(无状态组件)中的用户触发的动作转化为派送个store的动作,前者(mapStateToProps)是一个内层傻瓜组件对象的输入,后者(mapDispatchToProps)内层傻瓜组件的输出

mapStateToProps与mapDispatchToProps的工作套路就是:把Store上的状态转化为内层组件的props,然后在组件内部通过 this.props的方式拿到,这是不同于之前 this.state的方式的,其实就是一个映射关系。

mapStateToProps(state, [ownProps])

mapStateToProps是一个函数。见名思义,它是建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。

既然作为函数, mapStateToProps执行后应该返回一个对象,里面的每一个键值对就是一个映射

mapStateToProps 接受两个参数,第一个是 state,第二个是 ownProps, store的 state和自定义的 props,并返回一个新的对象,这个对象会作为 props的一部分传入 ui组件。

我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会触发 mapStateToProps, ownProps代表容器组件的 props对象

const mapStateToProps = (state) => {  // state代表的是store中state的状态
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

在上面代码中, mapStateToProps是一个函数,它接受state作为参数,并且第一个参数就是 state, 它返回一个对象。这个对象有 inputValue和 list属性,它代表着 UI 组件的同名参数,后面的 state.inputValue,以及 state.list就是从 Store中的 state的拿到内部组件输入框的值和底下列表的值

 mapStateToProps会订阅 Store,每当 state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。

 mapDispatchToProps(dispatch,[ownProps])

mapDispatchToProps是 connect函数的第二个参数,它是用来建立 UI 组件的参数到 store.dispatch方法的映射。 

换句话说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。

如果 mapDispatchToProps是一个函数,会得到 dispatch和 ownProps(容器组件的props对象)两个参数

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
       handleInputChange(e) {
            const action = {
                type: "handle_input_change",
                value: e.target.value
            }
            dispatch(action);
       },


       handleAddContent() {
        const action = {
            type: "handle_add_content"
        }
        dispatch(action);
       },


       handleDeleteList(index) {
        const action = {
            type: 'handle_delete_list',
            index
        }
        dispatch(action);
       }
    }  
}

从上面代码可以看到, mapDispatchToProps作为函数,应该返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action。

如果 mapDispatchToProps是一个对象,那么会和 store绑定作为 props的一部分传入ui组件,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator,返回的 Action会由 Redux 自动发出。举例来说,上面的 mapDispatchToProps写成对象,则如下所示:下面的函数是Es6的简写形式

const mapDispatchTopProps = {
     handleInputChange(e) {   // 等价于handleInputChange: function(e){ ...}
            const action = {
                type: "handle_input_change",
                value: e.target.value
            }
            dispatch(action);
       },


       handleAddContent() {
        const action = {
            type: "handle_add_content"
        }
        dispatch(action);
       },


       handleDeleteList(index) {
        const action = {
            type: 'handle_delete_list',
            index
        }
        dispatch(action);
       }
 }

不论 mapDispatchToProps是对象还是函数,它最终都会返回一个对象,如果是函数,这个对象的 key值是可以自定义的

function mapDispatchToProps(dispatch) {
   return {
      attrActions: bindActionCreators(todoActionCreators, dispatch) // bindActionCreators是Redux的一个方法,会将action和dispatch绑定并返回一个对象,这个对象会和ownProps一起作为props的一部分传入ui组件
   };
}

mapDispatchToProps返回的对象其属性其实就是一个个 actionCreator,因为已经和 dispatch绑定,所以当调用 actionCreator时会立即发送action,而不用手动dispatch

mapStateToProps和 mapDispatchToProps都可以包含第二个参数 ownProps,ownProps的变化也会触发 mapDispatchToProps

mergeProps(stateProps, dispatchProps, ownProps)

作用:它是 connect函数的第三个参数,将 mapStateToProps()与 mapDispatchToProps()返回的对象和组件自身的 props合并成新的 props并传入组件。默认返回 Object.assign({}, ownProps, stateProps, dispatchProps)的结果

const mergeProps = () => {
      return Object.assign({}, ownProps, stateProps, dispatchProps)
}

options

当 pure = true表示 connect容器组件将在 shouldComponentUpdate中对 store的 state和ownProps进行浅对比,判断是否发生变化,优化性能。若为false则不对比

这个options有很多,具体可以参考 react-redux官方文档

{
  context?: Object,
  pure?: boolean,
  areStatesEqual?: Function,
  areOwnPropsEqual?: Function,
  areStatePropsEqual?: Function,
  areMergedPropsEqual?: Function,
  forwardRef?: boolean,
}

结语

本文主要学习了如何使用 react-redux,使用 react-redux只是为了简化Redux的,不使用react-redux也没有问题,只是使用react-redux可以更简便的管理我们的状态,更好的组织我们的代码

但是随之而来的就是学习成本,得学习那些 Provider, connect等API的使用,这也是为什么这些框架令人蛋疼的原因,本以为学了React能搞事,但发现依旧还有一座山在等着你

什么解决异步问题react-thunk,react-saga等中间件,middleWare,路由react-router等

当然最新版本的React中已经有了React hooks,有了这个你可以替代Redux,或者react-redux,但是笔者认为,技术没有金弹或者银弹,适合业务的技术才是最好的

理解redux以及react-redux不妨也是一种技术选择,更好的与React hooks做比较,从而选择一个最适宜的.

React很多东西很抽象 学习起来,就有些费劲~以后也会循序渐进,一一进行分享的

最后,看完本节:记住几点

  • Provider是一个由react-redux提供的组件,用于接收store的数据,供内部组件暴露的一个接口

  • connect是react-redux库提供的一个函数,用于连接UI组件的,并且最终生成一个容器组件,提供了一些映射方法,mapStateToProps以及mapDispatchToProps

  • 在UI组件内部的数据通过this.props来填充渲染

.

往期推荐

“阅”往开来

React进阶(6)-react-redux的使用_第3张图片

“javascript中的同步与异步”


“小程序云开发基础”


  • js数组中一些实用的方法(forEach,map,filter,find)

React进阶(6)-react-redux的使用_第4张图片

【自我介绍】

作者:川川,一个靠前排的90后帅小伙,具有情怀的代码男,路上正追逐斜杠青年的践行者,愿做你耳朵旁边的枕男,眼睛笔尖下的窗户

itclanCoder

添加微信suibichuanji

     

阅后即焚,随手三连击

  • 点赞】随意,您的鼓励将会使我更加的努力,如果喜欢,点个【】,或与人【分享】,让我知道你曾今来过

  • 欢迎文章下方【留言】,一起学习探讨,您的评论藏过你读过的书

  • 关注公众号【itclanCoder】,分享的不仅仅是代码,还有柴米油盐,致力于为你打开你另一扇窗

戳阅读原文

,更多精彩内容,值得被爆料!

你可能感兴趣的:(React进阶(6)-react-redux的使用)