热镀锌（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)