├─component│   connect.js│   counter.js│└─store    index.js

import React from "react";import ReactDom,{render} from "react-dom";import Couter from "./component/counter";import {Provider} from "./component/connect" import store from "./store/index"  ReactDom.render(<Provider store={store}><Couter/></Provider>,document.getElementById("root"));

import {createStore} from "redux";function reducer(state={number:0},action) {  switch (action.type){    case "add":      return {number:state.number+action.count}    default:      return state;  }}export default createStore(reducer);

import React from "react";import PropTypes from "prop-types";//Provider是一個組件 接受一個store屬性 將其內容掛載在上下文context //這樣后代才可以都有辦法拿到 class Provider extends React.Component{  static childContextTypes={    //設置上下文的類型是對象 store:PropTypes.object }  getChildContext(){    //獲取并設置后代上下文的內容 return {store:this.props.store}  }  render(){    return this.props.children }}let connect=(mapStateToProps,mapDispatchToProps)=>(comp)=>{  return class Proxy extends React.Component{    static contextTypes={      store:PropTypes.object }    constructor(props,context){      super(props);      //將參數mapStateToProps 的解構賦值 代理組件的狀態 this.setState=mapStateToProps(context.store.getState())    }    componentDidMount(){      this.context.store.subscribe(()=>{        this.setState(mapStateToProps(this.context.store.getState()))      })    }    render(){      return <comp {...this.state} {...mapDispatchToProps(this.context.store.dispatch)}/>    }  }}export {Provider,connect}

import React from "react";import {connect} from "./connect";export default class Counter extends React.Component{  constructor(props){    super(props);  }  render(){    return (      <div>        <button onClick={()=>{          this.props.add(5);        }}>+</button>        {this.props.n}      </div>    )  }}let mapStateToProps=(state)=>{  return {n:state.number}};let mapDispatchToProps=(dispatch)=>{  return {    add:(count)=>{      dispatch({type:"add",count:count})    }  }}export default connect(mapStateToProps,mapDispatchToProps)(Counter)