簡(jiǎn)介：簡(jiǎn)單實(shí)現(xiàn)react-redux基礎(chǔ)api

把store放在context里，所有子組件可以直接拿到store數(shù)據(jù)

使組件層級(jí)中的 connect() 方法都能夠獲得 Redux store
根組件應(yīng)該嵌套在  中

ReactDOM.render(
  
    
  ,
  rootEl
)

ReactDOM.render(
  
    
      
        
        
      
    
  ,
  document.getElementById("root")
)

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
鏈接組件和數(shù)據(jù),把redux中的數(shù)據(jù)放到組件的屬性中

[mapStateToProps(state, [ownProps]): stateProps] (Function)

如果定義該參數(shù)，組件將會(huì)監(jiān)聽(tīng) Redux store 的變化。任何時(shí)候，只要 Redux store 發(fā)生改變，mapStateToProps 函數(shù)就會(huì)被調(diào)用。該回調(diào)函數(shù)必須返回一個(gè)純對(duì)象，這個(gè)對(duì)象會(huì)與組件的 props 合并

如果你省略了這個(gè)參數(shù)，你的組件將不會(huì)監(jiān)聽(tīng) Redux store
ownProps，則該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新的 props，mapStateToProps 也會(huì)被調(diào)用，被重新計(jì)算
mapStateToProps 函數(shù)的第一個(gè)參數(shù)是整個(gè)Redux store的state，它返回一個(gè)要作為 props 傳遞的對(duì)象。它通常被稱作 selector （選擇器）。 可以使用reselect去有效地組合選擇器和計(jì)算衍生數(shù)據(jù).
注意：如果定義一個(gè)包含強(qiáng)制性參數(shù)函數(shù)（這個(gè)函數(shù)的長(zhǎng)度為 1）時(shí)，ownProps 不會(huì)傳到 mapStateToProps

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

Object: 它的每個(gè)鍵名也是對(duì)應(yīng) UI 組件的同名參數(shù)，鍵值應(yīng)該是一個(gè)函數(shù)（action creator），會(huì)被當(dāng)作 Action creator ，返回的 Action 會(huì)由 Redux 自動(dòng)發(fā)出,

Function: 會(huì)得到dispatch和ownProps（容器組件的props對(duì)象）兩個(gè)參數(shù)（此時(shí)可能用到Redux 的輔助函數(shù) bindActionCreators())

省略這個(gè) mapDispatchToProps 參數(shù)，默認(rèn)情況下，dispatch 會(huì)注入到你的組件 props 中，你可以this.props.dispatch調(diào)用
指定了該回調(diào)函數(shù)中第二個(gè)參數(shù) ownProps，該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新 props，mapDispatchToProps 也會(huì)被調(diào)用

eg:

connect(mapStateToProps, {
  hideAdPanel,
  pushAdData,
})(AdPanel)

function mapDispatchToProps(dispatch) {
  return {
    todoActions: bindActionCreators(todoActionCreators, dispatch),
    counterActions: bindActionCreators(counterActionCreators, dispatch)
  }
}

高階組件就是一個(gè)函數(shù)，且該函數(shù)接受一個(gè)組件作為參數(shù)，并返回一個(gè)新的組件
高階組件就是一個(gè)沒(méi)有副作用的純函數(shù)

使用場(chǎng)景：兩個(gè)組件大部分代碼都是重復(fù)的+且更好的封閉性，不需要關(guān)注數(shù)據(jù)的獲取

import React, {Component} from "react"

class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }

    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        })
    }

    render() {
        return (
            
welcome {this.state.username}
        )
    }
}

export default Welcome;

import React, {Component} from "react"

class Goodbye extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }

    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        })
    }

    render() {
        return (
            
goodbye {this.state.username}
        )
    }
}

export default Goodbye;

welcome和goodbye組件相似，只能獲取的數(shù)據(jù)不一樣，用高階組件，提取公共部分

import React, {Component} from "react"

export default (WrappedComponent) => {
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                username: ""
            }
        }

        componentWillMount() {
            let username = localStorage.getItem("username");
            this.setState({
                username: username
            })
        }

        render() {
            return 
        }
    }

    return NewComponent
}

簡(jiǎn)化welcome和goodbye

import React, {Component} from "react";
import wrapWithUsername from "wrapWithUsername";

class Welcome extends Component {

    render() {
        return (
            
welcome {this.props.username}
        )
    }
}

Welcome = wrapWithUsername(Welcome);

export default Welcome;

此時(shí)，理解react-redux 的connect就好理解了

ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);

// connect是一個(gè)返回函數(shù)的函數(shù)（就是個(gè)高階函數(shù)）
const enhance = connect(mapStateToProps, mapDispatchToProps);
// 返回的函數(shù)就是一個(gè)高階組件，該高階組件返回一個(gè)與Redux store
// 關(guān)聯(lián)起來(lái)的新組件
const ConnectedComment = enhance(Component);

import React from "react"
import ReactDOM from "react-dom"
import { createStore, applyMiddleware, compose} from "redux"
import thunk from "redux-thunk"
import { counter } from "./index.redux"
// import { Provider } from "react-redux"
// 換成自己的Provider實(shí)現(xiàn)
import { Provider } from "./self-react-redux"
import App from "./App"

const store = createStore(counter, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f => f
))
ReactDOM.render(
  (
    
      
    
  ),
  document.getElementById("root"))

./self-react-redux

import React from "react"
import PropTypes from "prop-types"

export function connect(){
}

class Provider extends React.Component{
  static childContextTypes = {
    store: PropTypes.object
  }
  getChildContext() {
    return { store: this.store }
  }
  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }
  render(){
    return this.props.children
  }
}

demo

import React from "react"
// import { connect } from "react-redux"
import { connect } from "./self-react-redux"
import { addGun, removeGun, addGunAsync } from "./index.redux"

@connect(
    // 你要state什么屬性放到props里
    state=>({num:state.counter}),
    // 你要什么方法，放到props里，自動(dòng)dispatch
    { addGun, removeGun, addGunAsync }
)
class App extends React.Component{
    render(){
        return (
            

                
現(xiàn)在有機(jī)槍{this.props.num}把
                申請(qǐng)武器                
                上交武器                
                拖兩天再給                
            
        )
    }
}


export default App

./self-react-redux.js

// 高階組件的寫法
export function connect(maoStateToProps, mapStateToProps) {
  return function(WrapComponent) {
    return class ConnectComponent extends React.Component{
 
    }
  }
}


import React from "react"
import PropTypes from "prop-types"
import { bindActionCreator } from "./self-redux"
// 使用簡(jiǎn)寫形式
// connect負(fù)責(zé)鏈接組件，給到redux里的數(shù)據(jù)放在組件的屬性里
// 1. 負(fù)責(zé)接收一個(gè)組件，把state里的一些數(shù)據(jù)放進(jìn)去，返回一個(gè)組件
// 2. 數(shù)據(jù)變化的時(shí)候，能通知組件
export const connect = (
  mapStateToProps = state => state,
  mapDispatchToProps ={}
) => (WrapComponent) => {
  return class ConnectComponent extends React.Component {
    static contextTypes = {
      store: PropTypes.object
    }
    constructor(props, context){
      super(props, context)
      this.state = {
        props: {}
      }
    } 
    // 2 實(shí)現(xiàn)了mapStateToProps
    componentDidMount() {
      const { store } = this.context
      store.subscribe(() => this.update())
      this.update()
    }
    update() {
      const { store } = this.context
      // store.getState()這就是為什么mapStateToProps函數(shù)里面能拿到state 
      const stateProps = mapStateToProps(store.getState())
      // 方法不能直接給，因?yàn)樾枰猟ispatch
        /**
          function addGun() {
            return { type: ADD_GUN }
          }
          直接執(zhí)行addGun() 毫無(wú)意義
          要 addGun = () => store.dispatch(addGun()) 才有意義，其實(shí)就是把a(bǔ)ctionCreator包了一層
          bindActionCreators在手寫redux api實(shí)現(xiàn)了
         */
      const dispatchProps = bindActionCreators(mapDispatchToProps, store.dispatch)
      // 注意state的順序問(wèn)題會(huì)覆蓋
      this.setState({
        props: {
          ...this.state.props,
          ...stateProps,
          ...dispatchProps,
        }
      })
    }
    // 1
    render() {
      return 
    }
  }
}

./self-redux.js

// creators： {addGun, removeGun, addGunAsync}
// creators[v]：addGun(參數(shù))
// 返回：(參數(shù)) => dispatch(addGun(參數(shù)))
 function bindActionCreator(creator, dispatch) {
   return (...args) => dispatch(creator(...args))
 }

 export function bindActionCreators(creators, dispatch) {
   let bound = {}
   Object.keys(creators).forEach( v => {
     let creator = creators[v]
     bound[v] = bindActionCreator(creator, dispatch)
   })
   return bound
 }
// 簡(jiǎn)寫
 export function bindActionCreators(creators, dispatch) {
  return Object.keys(creators).reduce((ret, item) => {
     ret[item] =  bindActionCreator(creators[item], dispatch)
     return ret
   }, {})
 }