自定義React-redux

實作mini版react-redux

1. 理解react-redux模塊

 1). react-redux模塊整體是一個物件模塊
 2). 包含2個重要屬性: Provider和connect
 3). Provider
    值: 組件類
    作用: 向所有容器子組件提供全域store物件
    使用: <Provider store={store}><Xxx/></Provider>
 4). connect
    值: 高階函式
    作用: 包裝組件生成容器組件, 讓被包裝組件能與redux進行通信
    使用: connect(mapStateToProps, mapDispatchToProps)(Xxx)

2. context的理解和使用

1). 理解
  當你覺得多層傳遞props麻煩, 可以選擇使用context
  context是組件物件的一個屬性, 它的值是一個物件
  一個組件指定的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 {
  // 宣告當前組件接收store
  static propTypes = {
    store: PropTypes.object.isRequired
  }

  // 必須宣告向子節點指定全域資料store
  static childContextTypes = {
    store: PropTypes.object.isRequired
  }

  // 指定向子組件指定全域資料store
  getChildContext() {
    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 {
      // 宣告接收全域store
      static contextTypes = {
        store: PropTypes.object.isRequired
      }

      // 建構式的第2個引數為context物件
      constructor(props, context) {
        super(props)
        console.log('constructor', this.context) // 此時組件物件中還沒有context
        // 從context中取出store
        const {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 creator
        Object.keys(mapDispatchToProps).forEach((key) => {
          // 得到某個action creator
          const actionCreator = mapDispatchToProps[key]
          //定義包含分發action代碼的函式, 并只在到準備好的容器中
          dispatchProps[key] = (...args) => {
            this.context.store.dispatch(actionCreator(...args))
          }
        })
        // 回傳dispatch代碼函式容器物件
        return dispatchProps
      }

      componentDidMount() {
        console.log('componentDidMount', this.constructor)
        // 得到store
        const {store} = this.context
        // 訂閱監聽
        store.subscribe(() => {
          // 一旦store中的state有變化, 更新組件狀態, 從而導致被包裝組件重新渲染
          this.setState(mapStateToProps(store.getState()))
        })
      }

      render() {
        return <WrapComponent {...this.state} {...this.dispatchProps} />
      }
    }
  }
}

標籤：JavaScript

上一篇：自定義Redux

下一篇：react-jsx語法