实现mini版react-redux
1. 理解react-redux模块
1). react-redux模块整体是一个对象模块2). 包含2个重要属性: Provider和connect3). Provider值: 组件类作用: 向所有容器子组件提供全局store对象使用: <Provider store={store}><Xxx/></Provider>4). connect值: 高阶函数作用: 包装组件生成容器组件, 让被包装组件能与redux进行通信使用: connect(mapStateToProps, mapDispatchToProps)(Xxx)
2. context的理解和使用
1). 理解当你觉得多层传递props麻烦, 可以选择使用contextcontext是组件对象的一个属性, 它的值是一个对象一个组件指定的context内数据, 所有层次子组件都可以读取到如果可以尽量不用context, 你可以选择使用react-redux, react-redux内部就利用了context
2). 使用父组件:static childContextTypes = {color: PropTypes.string}getChildContext() {return {color: 'red'};}后代组件:static contextTypes = {color: PropTypes.string}render () {this.context.color}
3. 实现代码: src/libs/react-redux/index.js
import React, {Component} from 'react'
import PropTypes from 'prop-types'/*
1. Provider组件类*/
export class Provider extends Component {// 声明当前组件接收storestatic propTypes = {store: PropTypes.object.isRequired}// 必须声明向子节点指定全局数据storestatic childContextTypes = {store: PropTypes.object.isRequired}// 指定向子组件指定全局数据storegetChildContext() {return {store: this.props.store};}render() {// 返回所有子节点(如果没有子节点返回undefined, 如果只有一个子节点它是对象, 如果有多个它是数组)return this.props.children}
}/*
2. connect方法*/
export function connect(mapStateToProps = () => null, mapDispatchToProps = {}) {// 返回函数(接收被包装组件类作为参数)return (WrapComponent) => {// 返回一个新的组件类return class ConnectComponent extends Component {// 声明接收全局storestatic contextTypes = {store: PropTypes.object.isRequired}// 构造函数的第2个参数为context对象constructor(props, context) {super(props)console.log('constructor', this.context) // 此时组件对象中还没有context// 从context中取出storeconst {store} = context// 一般属性: 调用mapStateToProps函数得到包含所有需要传递一般属性的集合对象const stateProps = mapStateToProps(store.getState())// 分发action的函数属性: 调用自定义的整合函数生成包含多个分发action的函数的对象const dispatchProps = this.bindActionCreators(mapDispatchToProps)// 初始化状态, 包含所有需要传递给WrapComponent组件的一般属性this.state = {...stateProps}// 将包含dispatch函数的对象保存在组件对象上(不用放到state中)this.dispatchProps = dispatchProps}/*根据包含多个action creator的对象, 返回一个包含多个分发action的函数的对象*/bindActionCreators = (mapDispatchToProps) => {// 准备一个保存分发action函数的对象容器const dispatchProps = {}// 遍历每个action creatorObject.keys(mapDispatchToProps).forEach((key) => {// 得到某个action creatorconst actionCreator = mapDispatchToProps[key]//定义包含分发action代码的函数, 并只在到准备好的容器中dispatchProps[key] = (...args) => {this.context.store.dispatch(actionCreator(...args))}})// 返回dispatch代码函数容器对象return dispatchProps}componentDidMount() {console.log('componentDidMount', this.constructor)// 得到storeconst {store} = this.context// 订阅监听store.subscribe(() => {// 一旦store中的state有变化, 更新组件状态, 从而导致被包装组件重新渲染this.setState(mapStateToProps(store.getState()))})}render() {return <WrapComponent {...this.state} {...this.dispatchProps} />}}}
}