redux crateStore connect

頁面發佈-分發dispatch(action(:object)，action已被connect(mapStateToProps, mapDispatchToProps)(App)映射到組件props )

reducer里的純函數執行,拿到action里返回的對象數據，賦值給redux中的Store，reducer文件 與action文件都是返回store所需對象數據，兩個文件對這個對象處理再次細分了，

reducer 純粹賦值 action 對數據的來源，或對數據加以標記等

function createStore(reducer) {
      var state;
      var listeners = []
      function getState() {
          return state
      }   
  
      function subscribe(listener) {
          listeners.push(listener)
          return function unsubscribe() {
              var index = listeners.indexOf(listener)
              listeners.splice(index, 1)
          }
      } 
  
      function dispatch(action) {
          state = reducer(state, action)
          listeners.forEach(listener => listener())
          // listeners.forEach(listener => listener.apply(this,action)
          /* 
          *普通觀察者應該是在訂閱回調函數中處理分發時傳的參數，這裡很巧妙的用了實例化時外部傳入的reducer純函數，
          *這樣 訂閱的回調函數 就讓reducer來操作了
          *而listener訂閱回調暫時是對組件的更新，subscribe是在connect連接時訂閱的
           */
      }
      dispatch({})
      return { dispatch, subscribe, getState }
  }

這裡是connect用於理解的代碼

//connect（）是一個將Redux相關的道具註入組件的函數。
//您可以註入數據和回調，通過調度操作更改數據。
function connect(mapStateToProps, mapDispatchToProps) {
  //它讓我們註入組件作為最後一步，這樣人們就可以使用它作為裝飾。
//一般來說你不需要擔心。
  return function (WrappedComponent) {
    //它返回一個組件
    return class extends React.Component {
      render() {
        return (
          //呈現組件
          
        )
      }
      
      componentDidMount() {
        
        //在componentDidMount它記得訂閱商店，這樣就不會錯過更新
        this.unsubscribe = store.subscribe(this.handleChange.bind(this))
      }
      
      componentWillUnmount() {
        //稍後取消訂閱
        this.unsubscribe()
      }
    
      handleChange() {
        //每當存儲狀態改變時，它就會重新呈現。
        this.forceUpdate()
      }
    }
  }
}

//這不是真正的實現，而是一個心智模型。
//它跳過了從何處獲取“存儲”的問題（答案：將其放在React上下文中）
//它跳過了任何性能優化（real connect（）確保我們不會徒勞地重新渲染）。
//connect（）的目的是不必考慮
//訂閱應用商店或自己進行性能優化，以及
//相反，您可以指定如何基於Redux存儲狀態獲取道具：

const ConnectedCounter = connect(
  //給定Redux狀態，返回道具
  state => ({
    value: state.counter,
  }),
  //給定Redux調度，返回回調道具
  dispatch => ({
    onIncrement() {
      dispatch({ type: 'INCREMENT' })
    }
  })
)(Counter)