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)