react-redux实现原理

Dear 丶 2022-12-12 01:55 139阅读 0赞

import React, {Component} from "react";
    const ValueContext = React.createContext();
    // connect
    export const connect = (
         mapStateToProps = state => state,
         mapDispatchToProps
    ) => WrappedComponent => {
     return class extends Component {
         static contextType = ValueContext;
         constructor(props) {
             super(props);
             this.state = {
                 props: {}
             };
         }
         componentDidMount() {
             this.update();
             const {subscribe} = this.context;
             subscribe(() => {
                 this.update();
             });
         }
         update = () => {
             const {getState, dispatch} = this.context;
             const stateProps = mapStateToProps(getState());
             let dispatchProps;
             console.log("mapDispatchToProps",mapDispatchToProps); //sy-log
             if (typeof mapDispatchToProps ==="object") {
                 dispatchProps =bindActionCreators(mapDispatchToProps,dispatch);
             } else if (typeof mapDispatchToProps ==="function") {
                 dispatchProps =mapDispatchToProps(dispatch, this.props);
             } else {
                 dispatchProps = {dispatch};
             }
             this.setState({
                 props: {
                     ...stateProps,
                     ...dispatchProps
                 }
             });
         };
         render() {
             return <WrappedComponent {...this.props} {...this.state.props} />;
         }
     };
    };
    
    // Provider
    // /context
    export class Provider extends Component {
     render() {
         return (
             <ValueContext.Provider value= {this.props.store}>
                 {this.props.children}
             </ValueContext.Provider>
         );
     }
    }
    
    // let creators = {
    //     add: () => ({type: "ADD"}),
    //     minus: () => ({type: "MINUS"})
    // };
    
    function bindActionCreator(creator, dispatch) {
         return (...args) => dispatch(creator(...args));
    }
    
    export function bindActionCreators(creators,dispatch) {
     const obj = {};
     for (const key in creators) {
         obj[key] = bindActionCreator(creators[key],dispatch);
     }
     return obj;
    }

原文：视频讲解笔记