react-redux provider connect createStore 简写

export const connect = (mapStateToProps, mapDispatchToProps) => 
  (WrappedComponent) => {
    class Connect extends Component {
       static contextTypes = {
         store: PropTypes.object
       }
 
       constructor () {
         super()
         this.state = {
           allProps: {}
         }
       }
 
       componentWillMount () {
        // 获取context store ，来源provider 组件
         const { store } = this.context 
         this._updateProps()
         // store 里加入这个updatedProps 订阅
         store.subscribe(() => this._updateProps()) 
         //为什么不直接用this._updateProps, 而是用箭头函数，为了 _updateProps 保存this指向 本组件this
       }
 
       _updateProps () {
         const { store } = this.context
         let stateProps = mapStateToProps
           ? mapStateToProps(store.getState(), this.props)
           : {} // 防止 mapStateToProps 没有传入
         let dispatchProps = mapDispatchToProps
           ? mapDispatchToProps(store.dispatch, this.props)
           : {} // 防止 mapDispatchToProps 没有传入
         this.setState({
            allProps: {
             ...stateProps,
             ...dispatchProps,
             ...this.props
            }
         })
       }
 
       render () {
         return
       } 
     }
  return Connect
}
 
export class Provider extends Component {
    static propTypes = {
       store: PropTypes.object,
       children: PropTypes.any
    }
 
    static childContextTypes = {
       store: PropTypes.object
     }
 
     getChildContext () {
       return {
         store: this.props.store // 向context 写store
       }
     }
 
     render () {
        return (
           {this.props.children}
         )
     }
}
 
function createStore (reducer) {
    let state = null
    const listeners = [ ]；
    const subscribe = (listener) => listeners.push(listener)
    const getState = () => state
    const dispatch = (action) => {
      state = reducer(state, action);
      listeners.forEach((listener) => listener())
    }
    // 每一次dispatch 都会更新所有订阅
    dispatch({}) // 初始化 state
    return { getState, dispatch, subscribe }
}
 
 
// App.js:
 
const themeReducer = (state, action) => {
   if (!state) return {
    themeColor: 'red'
   }
   switch (action.type) {
     case 'CHANGE_COLOR':
       return { ...state, themeColor: action.themeColor }
     default:
       return state
    }
 }
 
const store = createStore(themeReducer)
 
class App extends Component {
    render() {
       return (
      );
    }
}
 
export default App;
Leave a Reply Cancel reply
