react-redux的使用及源码实现

ReactReduxPage.js

import React from "react"
import {connect} from "react-redux"

@connect(
   // mapStateToProps
   ({count})=({count}),
   //mapDispatchToProps  object | function
   //第一种object
   {
     add:()=>({type:"ADD"})
   }
   //第二种function
   (dispatch)=>{
    let createors={
       // add:()=>dispatch({type:"ADD"}),
       //不用dispatch时 要用bindActionCreateors
       // minus:()=>dispatch({type:"MINUS"})
       add:()=>({type:"ADD"}),
        minus:()=>({type:"MINUS"})
     }
     createors=bindActionCreateors(createors,dispatch)
     return {
      dispatch,
      ...createors
     }
   }
   
)
class ReactReduxPage extends Component{
const {count,dispatch} =this.props
  render(){
    return(
      <div>
         <h3>ReactReduxPage</h3>
         <p>{count></p>
         <button onClick={()=>{dispatch({type:"ADD"})}}></button>
         <button onClick={add}></button>
      </div>
    )
  }
 
}

store.js

 import {createStore,combineReducer} from "redux"
 export const countReducer=(state=0,{type,payload})=>{
   switch(type){
     case "ADD":
     return state+payload;
     case "MINUS":
     return state-payload;
     default:
     return state;
   
   }
   
 }
 const store=createStore(combineReducer({count:countReducer}))
 export default store;

index.js

 import React from "react"
 import ReactDom from "react-dom"
 import "./index.css"
 import App from "./App"
 import store from "./store/"
 import {Provider} from "react-redux"
 
 ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
 )

实现bindActionCreateors

function bindActionCreateor(createor,dispatch){
  return (...args)=>dispatch(createor(...args))
}
exxport function bindActionCreateors(createors,dispatch){
  const obj={}
  for(let key in createors){
    obj[key]=bindActionCreateor(create[key],dispatch)
  }
  return obj;
}

实现react-redux中的Provider

 export class Provider extends Component(){
   render(){
    return <ValueContext.Provider value={this.props.store}>
    {this.props.children}
    </ValueContext.Provider>
   }
 }

实现react-redux的connect

import React,{Component} from "react"
const ValueContext=React.createContext();
 export const connect=(
 mapStateToProps=state=>state,m
 apDispatchToProps
 )=>WrappedComponent=>{
   return class extends Component{
    static contextType=ValueContext;
    costructor(props){
     super(props)
     this.state={
       props:{}
      }
    }
    componentDidMount(){
      this.update();
      const {subscripe}=this.context;
      subscripe(()=>{this.update()})
    }
    update=()=>{
      const {getState,dispatch}=this.context;
      const stateProps=mapStateToProps(getState())
      let dispatchProps;
      if(typeof mapDispatchToProps==="object"){
        dispatchProps=bindActionCreateors(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} />
       }
     }
   }
 }