react-redux使用和源码分析（hook和class版本）

╰半夏微凉° 2021-09-02 10:46 364阅读 0赞

# react-redux #

*  React: 组件化的UI界面处理方案
 *  React-Router: 根据地址匹配路由，最终渲染不同的组件
 *  Redux：处理数据以及数据变化的方案（主要用于处理共享数据）
 *  react-redux库：连接redux和react

> 如果一个组件，仅用于渲染一个UI界面，而没有状态（通常是一个函数组件），该组件叫做**展示组件（UI组件）**  
> 如果一个组件，仅用于提供数据，没有任何属于自己的UI界面，则该组件叫做**容器组件**，容器组件纯粹是为了给其他组件提供数据。

*  Provider组件：没有任何UI界面，该组件的作用，是将redux的仓库放到一个上下文中。
 *  connect：高阶函数(HOC)，用于连接仓库和组件的
    
     *  细节一：如果对返回的容器组件加上额外的属性，则这些属性会直接传递到展示组件
     *  第一个参数：mapStateToProps:
        
         *  参数1：整个仓库的状态
         *  参数2：使用者传递的属性对象
     *  第二个参数：
        
         *  情况1：传递一个函数 mapDispatchToProps
            
             *  参数1：dispatch函数
             *  参数2：使用者传递的属性对象
             *  函数返回的对象会作为属性传递到展示组件中（作为事件处理函数存在）
         *  情况2：传递一个对象，对象的每个属性是一个action创建函数，当事件触发时，会自动的dispatch函数返回的action
     *  细节二：如果不传递第二个参数，通过connect连接的组件，会自动得到一个属性：dispatch，使得组件有能力自行触发action，但是，不推荐这样做。

# react-redux源码分析 #

// index.js
    export {  default as Provider } from "./Provider"
    export {  default as connect } from "./connect"
    
    // ctx.js
    import React from "react"
    export default React.createContext();

## Provider ##

import React from 'react'
    import ctx from './ctx'
    
    export default function Provider(props) { 
      return <ctx.Provider value={ props.store}>
        {  props.children }
        </ctx.Provider>
    }

## connent hook版本 ##

import React, {  useContext, useState, useEffect } from "react"
    import {  bindActionCreators } from "redux"
    import ctx from "./ctx";
    
    export default function (mapStateToProps, mapDispatchToProps) { 
        /** * 返回一个高阶组件 */
        return function (Comp) { 
            //对于Temp组件，只有它需要的数据发生变化时才会重新渲染
            function Temp(props) { 
                const store = useContext(ctx); //从上下文中拿到仓库
                const [state, setState] = useState(mapStateToProps && mapStateToProps(store.getState()))
    
                useEffect(() => { 
                    return store.subscribe(() => { 
                        var newState = mapStateToProps && mapStateToProps(store.getState());
                        setState(prevState => { 
                            if (compare(prevState, newState)) { 
                                return prevState;
                            }
                            else { 
                                return newState;
                            }
                        })
                    })
                }, [store])
    
                /** * 得到需要传递的事件处理属性 */
                function getEventHandlers() { 
                    if (typeof mapDispatchToProps === "function") { 
                        return mapDispatchToProps(store.dispatch, props);
                    }
                    else if (typeof mapDispatchToProps === "object") { 
                        return bindActionCreators(mapDispatchToProps, store.dispatch)
                    }
                }
                var handlers = { };
                if (mapDispatchToProps) { 
                    handlers = getEventHandlers();
                }
                return <Comp { ...state} { ...handlers} { ...props} />
            }
            Temp.displayName = Comp.displayName || Comp.name; //类组件的名称和传入的组件一致
            return Temp;
        }
    }
    
    function compare(obj1, obj2) { 
      for (const key in obj1) { 
          if (obj1[key] !== obj2[key]) { 
              return false;
          }
      }
      return true;
    }

## connent Class版本 ##

import React, {  PureComponent } from 'react'
    import {  bindActionCreators } from 'redux'
    import ctx from './ctx'
    
    export default function (mapStateToProps, mapDispatchToProps) { 
      /** * 返回一个高阶组件 */
      return function (Comp) { 
        //对于Temp组件，只有它需要的数据发生变化时才会重新渲染
        class Temp extends PureComponent { 
          static contextType = ctx
    
          /** * 得到需要传递的事件处理属性 */
          getEventHandlers() { 
            if (typeof mapDispatchToProps === 'function') { 
              return mapDispatchToProps(this.store.dispatch, this.props)
            } else if (typeof mapDispatchToProps === 'object') { 
              return bindActionCreators(mapDispatchToProps, this.store.dispatch)
            }
          }
    
          constructor(props, context) { 
            super(props, context)
            this.store = this.context
            if (mapStateToProps) { 
              //状态中的数据，来自于仓库中映射的结果
              this.state = mapStateToProps(this.store.getState(), this.props)
              //监听仓库中的数据变化，得到一个取消监听的函数
              this.unlisten = this.store.subscribe(() => { 
                this.setState(mapStateToProps(this.store.getState(), this.props))
              })
            }
            if (mapDispatchToProps) { 
              this.handlers = this.getEventHandlers()
            }
          }
    
          componentWillUnmount() { 
            if (this.unlisten) { 
              //当组件卸载时，取消监听
              this.unlisten()
            }
          }
    
          render() { 
            // console.log(`${Temp.displayName}重新渲染了`, this.state)
            return <Comp { ...this.state} { ...this.handlers} { ...this.props} />
          }
        }
        Temp.displayName = Comp.displayName || Comp.name //类组件的名称和传入的组件一致
        return Temp
      }
    }

# react-redux 其他api #

> 详情参考：https://react-redux.js.org/api

## connect ##

*  mergeProps: 一个函数
    
     *  参数1：stateProps，该参数的值来自于mapStateToProps返回的值
     *  参数2：dispatchProps，该参数的值来自于mapDispatchToProps返回的值
     *  参数3：ownProps，来自于组件使用者传递的属性
     *  返回值：一个对象，该对象的属性最终会被传递到包装的组件中。
 *  options：配置对象

## connectAdvanced ##

该函数和connect一样，也是用于连接React组件和Redux仓库的，只不过它的配置比connect少一些

该函数需要传递两个参数：

*  selectorFactory
    
     *  参数1：dispatch
     *  参数2：factoryOptions，配置
     *  返回：函数
        
         *  参数1：state
         *  参数2：ownProps
         *  返回的是一个对象：该对象的属性最终，会成为包装的组件的属性
 *  connectOptions

## createProvider ##

createProvider(字符串key)：通过一个唯一的key值创建一个Provider组件。

## 参考链接 ##

*  [react-redux官网][react-redux]
 *  [阮一峰React-Redux 的用法][React-Redux]

[react-redux]: https://react-redux.js.org/
[React-Redux]: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html